/*
 * Custom styles for Helix Ultimate (loaded by the template after its own CSS; not part of its update package, so updates keep it).
 * Header in the reference site's design (D54): headers/jacada/header.php + js/custom.js.
 * Source: src/helix/ in the Simple Booking repository; dev/bin/install-helix.sh copies it here.
 */

@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("../../../media/com_simplebooking/fonts/Figtree-normal-latin.woff2") format("woff2"); }

.jh {
  /* Colours: the template's colour preset (Template Options > Presets and > Menu). The second value is the default. */
  --jh-tan: var(--sppb-topbar-bg-color, #c1aa7f);                     /* top bar background */
  --jh-top-text: var(--sppb-topbar-text-color, #ffffff);              /* logo, currency and phone on the top bar */
  --jh-bar: var(--sppb-header-bg-color, #292927);                     /* menu bar background */
  --jh-menu: var(--sppb-menu-text-color, #ffffff);                    /* menu items, search icon */
  --jh-menu-hover: var(--sppb-menu-text-hover-color, #ffffff);
  --jh-panel: var(--sppb-menu-dropdown-bg-color, #1a1a1a);            /* drop-down panels, and the hovered menu item */
  --jh-panel-text: var(--sppb-menu-dropdown-text-color, #c1aa7f);
  --jh-panel-hover: var(--sppb-menu-dropdown-text-hover-color, #ffffff);
  --jh-lilac: var(--sppb-menu-text-active-color, #e6d0f7);            /* the Start Planning button */
  --jh-ink: var(--sppb-text-color, #23251f);                          /* text on that button */
  --jh-logo: var(--sppb-logo-text-color, #ffffff);                    /* the bundled logo, and a text logo */
  --jh-phone-bg: var(--sppb-menu-dropdown-bg-color, #1a1a1a);         /* the full-screen phone menu follows the drop-down colours */
  --jh-phone-text: var(--sppb-menu-text-color, #ffffff);
  --jh-phone-accent: var(--sppb-menu-dropdown-text-color, #c1aa7f);
  --jh-white: #fff;
  --jh-top-h: 102px;
  --jh-bar-h: 60px;
  --jh-mobile-h: 70px;
  position: sticky;
  top: calc(var(--jh-top-h) * -1);
  z-index: 1000;
  font-family: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--jh-white);
}

/* The menu bar stays at the top of the screen; the component's sticky bars sit under it. */
:root { --sb-sticky-offset: 60px; }

.jh *, .jh *::before, .jh *::after { box-sizing: border-box; }
.jh-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.jh-container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 15px; }
.jh a { text-decoration: none; }
.jh-search-toggle, .jh-menu-toggle, .jh-next, .jh-back__btn { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
.jh :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ---- Top bar: logo, currency, phone ---- */
.jh-top { background: var(--jh-tan); }
.jh-top__inner { display: flex; align-items: center; justify-content: space-between; height: var(--jh-top-h); }
.jh-logo { display: inline-flex; align-items: center; min-height: 44px; color: var(--jh-logo); line-height: 0; }
/* The logo has no hover effect (the template would turn it its link-hover blue over 0.4s). */
.jh-logo, .jh-logo:hover, .jh-logo:focus, .jh-logo:focus-visible, .jh-logo:active { color: var(--jh-logo); text-decoration: none; transition: none; opacity: 1; }
.jh-logo__svg { height: var(--jh-logo-h, 40px); width: auto; aspect-ratio: 144 / 40; }
.jh-logo__img { display: block; height: var(--jh-logo-h, 40px); width: auto; max-width: min(60vw, 360px); object-fit: contain; }
.jh-logo__img--phone { display: none; }
.jh-logo__text { font-family: var(--sb-font-head, Georgia, serif); font-size: calc(var(--jh-logo-h, 40px) * 0.95); line-height: 1; letter-spacing: 0.01em; white-space: nowrap; }
.jh-logo__slogan { display: block; margin-top: 0.3rem; font-size: 12px; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; }
.jh-logo:has(.jh-logo__slogan) { flex-direction: column; align-items: flex-start; justify-content: center; }
.jh-top__end { display: flex; align-items: center; gap: 40px; }
.jh-currency { --sb-currency-border: color-mix(in srgb, var(--jh-top-text) 55%, transparent); color: var(--jh-top-text); }
.jh-currency:empty { display: none; }
.jh-call { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.4; }
.jh-call__label { font-size: 15px; }
.jh-call { color: var(--jh-top-text); }
.jh-call__number { font-size: 18px; color: var(--jh-top-text); }
.jh-call__number:hover, .jh-call__number:focus-visible { color: var(--jh-top-text); text-decoration: none; transition: none; }
.jh-mobile { display: none; }

/* ---- Menu bar ---- */
.jh-bar { background: var(--jh-bar); }
.jh-bar__inner { display: flex; align-items: center; justify-content: space-between; height: var(--jh-bar-h); padding-left: 0; }
.jh-menu { list-style: none; margin: 0; padding: 0; }
.jh-menu--l1 { display: flex; align-items: stretch; height: var(--jh-bar-h); }
.jh-item { position: relative; }
.jh-menu--l1 > .jh-item { display: flex; }
.jh-link { display: flex; align-items: center; font-size: 14px; font-weight: 400; letter-spacing: 2.5px; text-transform: uppercase; color: var(--jh-menu); transition: none; }
/* Hovering a top item shows its dark block at once and changes no text colour (as on the reference; the template's 0.4s colour fade is off). */
.jh-menu--l1 > .jh-item > .jh-link { height: var(--jh-bar-h); padding: 0 15px; cursor: pointer; }
.jh-menu--l1 > .jh-item > .jh-link, .jh-menu--l1 > .jh-item > .jh-link:hover, .jh-menu--l1 > .jh-item > .jh-link:focus, .jh-menu--l1 > .jh-item > .jh-link:focus-visible, .jh-menu--l1 > .jh-item > .jh-link:active { color: var(--jh-menu); text-decoration: none; }
.jh-menu--l1 > .jh-item:hover > .jh-link, .jh-menu--l1 > .jh-item:focus-within > .jh-link { background: var(--jh-panel); }
.jh-next, .jh-back, .jh-menu--l1 > .jh-item.jh-mobile-only { display: none; }

/* Drop-downs: level 2 under its item, deeper levels fly out to the right, opened by hovering or by keyboard focus. */
.jh-menu .jh-menu { position: absolute; z-index: 20; min-width: 270px; background: var(--jh-panel); padding: 0; visibility: hidden; opacity: 0; transition: opacity 0.15s ease, visibility 0.15s; }
.jh-menu--l2 { top: 100%; left: 0; }
.jh-menu--l2 .jh-item { position: static; }
.jh-menu--l3, .jh-menu--l4 { top: 0; left: 100%; min-height: 100%; max-height: calc(100vh - var(--jh-bar-h) - 20px); overflow-y: auto; }
.jh-item:hover > .jh-menu, .jh-item:focus-within > .jh-menu, .jh-item.is-open > .jh-menu { visibility: visible; opacity: 1; }
.jh-item.is-closed > .jh-menu { visibility: hidden; opacity: 0; }
.jh-menu .jh-menu .jh-link { position: relative; padding: 15px 40px 15px 20px; color: var(--jh-panel-text); line-height: 1.4; }
/* Level 2 and 3 as on the reference (D66): pointing at an item moves it 5px to the right (level 2 also turns white, level 3 a touch dimmer), over 0.2s. A level 3
   list wider than 11 items goes into a second column, and a third, each 220px wide. */
@media (min-width: 992px) {
  .jh-menu .jh-menu .jh-link { transition: color 0.2s ease-out, padding 0.2s ease-out; }
  .jh-menu--l2 > .jh-item:hover > .jh-link, .jh-menu--l2 > .jh-item:focus-within > .jh-link, .jh-menu--l2 > .jh-item > .jh-link:focus-visible { padding-left: 25px; color: var(--jh-panel-hover); }
  .jh-menu .jh-menu--l3 { display: grid; grid-template-rows: repeat(11, auto); grid-auto-flow: column; grid-auto-columns: 220px; align-content: start; min-width: 220px; padding: 20px 0; overflow: visible; max-height: none; }
  .jh-menu .jh-menu--l3 .jh-link, .jh-menu .jh-menu--l4 .jh-link { padding: 5px 20px; font-size: 14px; letter-spacing: 0; text-transform: none; line-height: 24px; color: var(--jh-menu); }
  .jh-menu .jh-menu--l3 .jh-item > .jh-link:hover, .jh-menu .jh-menu--l3 .jh-item > .jh-link:focus-visible, .jh-menu .jh-menu--l4 .jh-item > .jh-link:hover, .jh-menu .jh-menu--l4 .jh-item > .jh-link:focus-visible,
  .jh-menu .jh-menu--l3 .jh-item:focus-within > .jh-link { padding-left: 25px; color: color-mix(in srgb, var(--jh-menu) 80%, var(--jh-panel)); }
  .jh-menu--l3 > .jh-item { padding-left: 40px; }
  .jh-menu .jh-menu--l3 .has-children > .jh-link, .jh-menu .jh-menu--l4 .has-children > .jh-link { padding-right: 40px; }
}
.jh-menu .jh-menu .has-children > .jh-link::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-50%) rotate(-45deg); }

.jh-bar__end { display: flex; align-items: center; gap: 26px; }
.jh-search-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--jh-menu); }
.jh-icon--close, .jh-search-toggle[aria-expanded="true"] .jh-icon--search { display: none; }
.jh-search-toggle[aria-expanded="true"] .jh-icon--close { display: block; }
.jh-cta { display: inline-flex; align-items: center; height: 42px; padding: 0 24px; border-radius: 60px; background: var(--jh-lilac); color: var(--jh-ink); font-size: 15px; letter-spacing: 0.01em; transition: background 0.3s, color 0.3s; }
.jh-cta:hover, .jh-cta:focus-visible { background: var(--jh-ink); color: var(--jh-white); }

/* ---- Search panel: a darkened band under the header with one large field ---- */
.jh-search { position: absolute; left: 0; right: 0; top: 100%; height: calc(100vh - var(--jh-bar-h)); background: var(--jh-panel); display: flex; align-items: flex-start; overflow: hidden; animation: jh-reveal 0.5s ease-in-out; }
/* The panel is the dark menu-drop-down colour, over a photo (the module in position "jacada-search-bg": Content > Site Modules > "Header: Search background")
   under a 70% overlay in the same colour, as on the reference. */
.jh-search__bg { position: absolute; inset: 0; z-index: 0; }
.jh-search__bg .mod-custom, .jh-search__bg picture { display: block; position: absolute; inset: 0; }
.jh-search__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; }
.jh-search__bg::after { content: ""; position: absolute; inset: 0; background: var(--jh-panel); opacity: 0.7; }
.jh-search__form { position: relative; z-index: 1; }
@keyframes jh-reveal { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.jh-search.is-closing { animation: jh-conceal 0.5s ease-in-out forwards; pointer-events: none; }
@keyframes jh-conceal { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
@media (prefers-reduced-motion: reduce) { .jh-search, .jh-search.is-closing { animation: none; } }
.jh-search[hidden] { display: none; }
.jh-search__form { display: flex; align-items: center; gap: 24px; margin-top: 30vh; padding-bottom: 14px; border-bottom: 1px solid var(--jh-white); max-width: 1280px; width: calc(100% - 30px); }
.jh-search__form .jh-icon { width: 40px; height: 40px; flex: none; color: var(--jh-white); }
.jh .jh-search__form input.jh-search__input, .jh .jh-search__form input.jh-search__input:focus { flex: 1; min-width: 0; height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--jh-white); font: inherit; font-size: 40px; font-weight: 300; line-height: 1.3; outline: 0; }
.jh-search__form:focus-within { border-bottom-width: 2px; padding-bottom: 13px; }
.jh-search__input::placeholder { color: rgba(255, 255, 255, 0.7); }
.jh-search__input::-webkit-search-cancel-button { filter: invert(1); }

/* Narrow desktops (992-1199 px): the six top items, search and button still fit on one line. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .jh-menu--l1 > .jh-item > .jh-link { padding: 0 8px; font-size: 12px; letter-spacing: 1.1px; }
  .jh-bar__inner { padding-left: 15px; }
  .jh-menu--l1 > .jh-item:first-child > .jh-link { padding-left: 0; }
  .jh-bar__end { gap: 12px; }
  .jh-cta { padding: 0 16px; font-size: 14px; }
}

/* Helix's own header and off-canvas toggler are not used with this header. */
body:has(.jh) #sp-header, body:has(.jh) #sp-top-bar, body:has(.jh) .sticky-header-placeholder { display: none; }

/* ---- Tablets and phones: top bar (tan by default) with search and MENU; the menu opens full screen and drills down ---- */
@media (max-width: 991.98px) {
  .jh { top: 0; }
  :root { --sb-sticky-offset: 70px; }
  .jh-top__inner { height: var(--jh-mobile-h); padding: 0 0 0 10px; }
  .jh-logo__svg { height: var(--jh-logo-h-sm, 25px); }
  .jh-logo__img { height: var(--jh-logo-h-sm, 25px); max-width: 50vw; }
  .jh-logo__img--wide { display: none; }
  .jh-logo__img--phone { display: block; }
  .jh-logo__text { font-size: calc(var(--jh-logo-h-sm, 25px) * 0.95); }
  .jh-top__end { display: none; }
  .jh-mobile { display: flex; align-self: stretch; }
  .jh-mobile__btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 100%; min-width: 44px; padding: 0 12px; border-left: 1px solid color-mix(in srgb, var(--jh-top-text) 60%, transparent); color: var(--jh-top-text); }
  .jh-menu-toggle__label { font-size: 13px; text-transform: uppercase; letter-spacing: 0.3px; }
  .jh-burger { position: relative; width: 20px; height: 14px; }
  .jh-burger span { position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: transform 0.2s, opacity 0.2s, top 0.2s; }
  .jh-burger span:nth-child(1) { top: 0; }
  .jh-burger span:nth-child(2) { top: 6px; }
  .jh-burger span:nth-child(3) { top: 12px; }
  .jh-menu-toggle[aria-expanded="true"] .jh-burger span:nth-child(1) { top: 6px; transform: rotate(45deg); }
  .jh-menu-toggle[aria-expanded="true"] .jh-burger span:nth-child(2) { opacity: 0; }
  .jh-menu-toggle[aria-expanded="true"] .jh-burger span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

  .jh-bar { position: fixed; top: var(--jh-mobile-h); left: 0; right: 0; bottom: 0; background: var(--jh-phone-bg); display: none; }
  .jh.is-menu-open .jh-bar { display: block; }
  .jh-bar__inner { display: block; height: 100%; max-width: none; padding: 0; }
  .jh-bar__end { display: none; }
  .jh-nav { position: relative; height: 100%; overflow-x: hidden; overflow-y: auto; }
  .jh-menu--l1 { display: block; height: auto; padding-top: 10px; }
  .jh-menu--l1 > .jh-item.jh-mobile-only { display: flex; }
  .jh-menu--l1 > .jh-item { display: flex; }
  .jh-item, .jh-menu--l2 .jh-item { position: static; display: flex; align-items: stretch; min-height: 50px; }
  .jh-link, .jh-menu .jh-menu .jh-link, .jh-menu--l1 > .jh-item > .jh-link { flex: 1; height: auto; min-height: 50px; padding: 0 0 0 26px; font-size: 12px; letter-spacing: 0.3px; color: var(--jh-phone-text); background: none; }
  .jh-menu--l1 > .jh-item:hover > .jh-link, .jh-menu--l1 > .jh-item:focus-within > .jh-link { background: none; }
  .jh-menu .jh-menu .has-children > .jh-link::after { display: none; }
  .jh-menu--l3 .jh-link, .jh-menu--l4 .jh-link { text-transform: none; }
  .jh-next { display: inline-flex; align-items: center; justify-content: center; width: 54px; flex: none; position: relative; color: var(--jh-phone-text); }
  .jh-next::before { content: ""; width: 11px; height: 11px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); }

  /* Every sub-level covers the panel; opening one slides it in, "Back" returns. */
  .jh-menu .jh-menu, .jh-menu--l2, .jh-menu--l3, .jh-menu--l4 { position: absolute; inset: 0; top: 0; left: 0; min-width: 0; min-height: 100%; max-height: none; background: var(--jh-phone-bg); transform: translateX(100%); visibility: hidden; opacity: 1; transition: transform 0.25s ease, visibility 0.25s; overflow-y: auto; z-index: 1; }
  .jh-item:hover > .jh-menu, .jh-item:focus-within > .jh-menu { visibility: hidden; transform: translateX(100%); }
  .jh-item.is-open > .jh-menu { visibility: visible; transform: none; }
  .jh-back { display: block; min-height: 0; }
  .jh-back__btn { display: flex; align-items: center; gap: 12px; width: 100%; height: 60px; padding: 0 26px; margin-bottom: 10px; color: var(--jh-phone-accent); font-size: 13px; border-bottom: 1px solid color-mix(in srgb, var(--jh-phone-text) 75%, transparent) !important; }
  .jh-back__btn::before { content: ""; width: 9px; height: 9px; border: solid currentColor; border-width: 0 0 1.5px 1.5px; transform: rotate(45deg); }

  .jh-search { position: fixed; top: var(--jh-mobile-h); height: auto; bottom: 0; }
  .jh-search__form { margin-top: 18vh; gap: 14px; width: calc(100% - 40px); }
  .jh-search__form .jh-icon { width: 26px; height: 26px; }
  .jh .jh-search__form input.jh-search__input { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .jh-menu .jh-menu, .jh-burger span { transition: none; }
}

/* While the phone menu or the search is open, the page behind does not scroll. */
html.jh-locked, html.jh-locked body { overflow: hidden; }

@media (max-width: 575.98px) {
  .jh-logo__svg, .jh-logo__img { height: var(--jh-logo-h-xs, 25px); }
}

/* ---- Colour preset for SP Page Builder pages (D61) ----
   The page builder pages (home, Our Story, Positive Impact ...) keep their colours as plain values, so the page editor shows them. Each colour role
   also carries a class, and these rules give the class its colour from the template's colour preset (Template Options > Presets):
   .sb-th-ink / -white / -tan / -muted: text colours      .sb-th-paper / -grey / -gold / -dark: band backgrounds
   .sb-th-btn: the call-to-action button                   .sb-th-ctabox: a box in the button colour
   Body text -> ink; Body background -> white; Footer background and text -> dark bands and their text; Top bar background -> the tan accent;
   Top bar text -> text on that accent; Menu active text color -> the call-to-action colour. */
:root {
  --jt-ink: var(--sppb-text-color, #23251f);
  --jt-bg: var(--sppb-bg-color, #ffffff);
  --jt-tan: var(--sppb-topbar-bg-color, #c3a675);
  --jt-top-text: var(--sppb-topbar-text-color, #ffffff);
  --jt-cta: var(--sppb-menu-text-active-color, #e6d0f7);
  --jt-dark: var(--sppb-footer-bg-color, #23251f);
  --jt-on-dark: var(--sppb-footer-text-color, #ffffff);
  --jt-paper: color-mix(in srgb, var(--jt-tan) 14%, var(--jt-bg));
  --jt-grey: color-mix(in srgb, var(--jt-ink) 7%, var(--jt-bg));
  --jt-muted: color-mix(in srgb, var(--jt-ink) 55%, var(--jt-bg));
  --jt-line: color-mix(in srgb, var(--jt-ink) 15%, var(--jt-bg));
}
.sb-th-paper { background-color: var(--jt-paper) !important; }
.sb-th-grey { background-color: var(--jt-grey) !important; }
.sb-th-gold { background-color: var(--jt-tan) !important; }
.sb-th-dark { background-color: var(--jt-dark) !important; }
.sb-th-ctabox { background-color: var(--jt-cta) !important; }
.sb-th-ink, .sb-th-ink :is(.sppb-addon-title, h1, h2, h3, h4, p, li, a, span, strong, em) { color: var(--jt-ink) !important; }
.sb-th-muted, .sb-th-muted :is(.sppb-addon-title, p, li, a, span) { color: var(--jt-muted) !important; }
.sb-th-tan, .sb-th-tan :is(.sppb-addon-title, p, li, a, span) { color: var(--jt-tan) !important; }
.sb-th-dark .sb-th-white, .sb-th-dark .sb-th-white :is(.sppb-addon-title, h1, h2, h3, h4, p, li, a, span, strong, em) { color: var(--jt-on-dark) !important; }
.sb-th-gold .sb-th-white, .sb-th-gold .sb-th-white :is(.sppb-addon-title, h1, h2, h3, h4, p, li, a, span, strong, em) { color: var(--jt-top-text) !important; }
.sb-th-ctabox .sb-th-ink, .sb-th-ctabox .sb-th-ink :is(.sppb-addon-title, p, a, span) { color: var(--jt-ink) !important; }
.sb-th-btn.sppb-btn, .sb-th-btn a.sppb-btn, .sb-th-btn .sppb-btn { background-color: var(--jt-cta) !important; border-color: var(--jt-cta) !important; color: var(--jt-ink) !important; }
.sb-th-btn.sppb-btn:hover, .sb-th-btn.sppb-btn:focus-visible, .sb-th-btn a.sppb-btn:hover, .sb-th-btn a.sppb-btn:focus-visible { background-color: var(--jt-tan) !important; border-color: var(--jt-tan) !important; color: var(--jt-ink) !important; }
.sb-th-btn--tan.sppb-btn, .sb-th-btn--tan a.sppb-btn, .sb-th-btn--tan .sppb-btn { background-color: var(--jt-tan) !important; border-color: var(--jt-tan) !important; color: var(--jt-top-text) !important; }
.sb-th-btn--tan.sppb-btn:hover, .sb-th-btn--tan.sppb-btn:focus-visible, .sb-th-btn--tan a.sppb-btn:hover, .sb-th-btn--tan a.sppb-btn:focus-visible { background-color: var(--jt-cta) !important; border-color: var(--jt-cta) !important; }

/* ---- Footer in the reference's design (D63) -----------------------------------------------------------------------------------------
   The footer is the SP Page Builder module "Footer" in the footer1 position (dev/tools/gen_footer.py); it shows two menu modules and three
   custom modules. Its colours follow the template's colour preset: Header background -> the footer; Menu drop-down background -> the
   "As seen in" band; Top bar background -> titles and field borders; Menu active text colour -> the Sign Up button. */
#sp-footer { --jf-bg: var(--sppb-header-bg-color, #292927); --jf-band: var(--sppb-menu-dropdown-bg-color, #1a1a1a); --jf-gold: var(--sppb-topbar-bg-color, #c1aa7f);
  --jf-text: var(--sppb-footer-text-color, #ffffff); --jf-cta: var(--sppb-menu-text-active-color, #e6d0f7); --jf-ink: var(--sppb-text-color, #1a1a1a); --jf-line: #707070;
  background: var(--jf-bg); color: var(--jf-text); padding: 0; font-family: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.62; }
#sp-footer > .container { max-width: none; width: 100%; padding: 0; }
#sp-footer .container-inner { padding: 0; border: 0; }
#sp-footer .container-inner > .row { margin: 0; }
#sp-footer #sp-footer1 { padding: 0; text-align: left; }
#sp-footer .sp-module { margin: 0; }
#sp-footer .jf-brands { background-color: var(--jf-band) !important; }
#sp-footer .jf-main, #sp-footer .jf-bottom { background-color: var(--jf-bg) !important; }
#sp-footer .sppb-section > .sppb-container-inner > .sppb-row, #sp-footer .sppb-row-container > .sppb-row { margin-left: 0; margin-right: 0; }
#sp-footer .sppb-row > [class*="sppb-col-"] { padding-left: 0; padding-right: 0; }
#sp-footer :is(p, li, a, label, span, strong) { color: var(--jf-text); }
#sp-footer a { text-decoration: none; }
#sp-footer a:hover, #sp-footer a:focus-visible { color: var(--jf-gold); }
#sp-footer p { margin: 0; }

/* "As seen in…" with a line either side, and the press logos */
#sp-footer .jf-seen .sppb-addon-title { display: flex; align-items: center; gap: 22px; color: var(--jf-text) !important; }
#sp-footer .jf-seen .sppb-addon-title::before, #sp-footer .jf-seen .sppb-addon-title::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--jf-text) 22%, transparent); }
#sp-footer .jf-press-row { padding: 0 15px; }
#sp-footer .jf-press img { display: block; max-width: 100%; }

/* columns */
#sp-footer .jf-col--awards, #sp-footer .jf-col--menu { padding-left: 30px; }
#sp-footer .jf-col--touch { padding-left: 30px; }
#sp-footer .jf-col--news { padding-right: 30px; }
#sp-footer .jf-title, #sp-footer .jf-title .sppb-addon-title { color: var(--jf-gold) !important; font-size: 18px; line-height: 1.2; font-weight: 400; margin: 0 0 4px; }
#sp-footer .jf-text .jf-title:not(:first-child) { margin-top: 26px; }
#sp-footer .jf-text { margin-bottom: 26px; }
#sp-footer .jf-review { margin: 26px 0 0; }
#sp-footer .jf-review img { display: block; margin: 6px 0 10px; }
#sp-footer .jf-review p:last-child { font-size: 15px; }
#sp-footer ul.jf-list { list-style: none; margin: 0; padding: 0; }
#sp-footer ul.jf-list > li { display: block; margin: 0; padding: 0; border: 0; }
#sp-footer ul.jf-list > li > a { display: inline-block; padding: 0; font-size: 16px; line-height: 1.62; color: var(--jf-text); }
#sp-footer ul.jf-list > li > a:hover, #sp-footer ul.jf-list > li > a:focus-visible { color: var(--jf-gold); }
#sp-footer .jf-social .sppb-icons-group-list { display: flex; gap: 0; margin: 0 0 0 -5px; padding: 0; list-style: none; }
#sp-footer .jf-social .sppb-icons-group-list > li { margin: 0 !important; padding: 0; }
#sp-footer .jf-social .sppb-icons-group-list a { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; }
#sp-footer .jf-social .sppb-icons-group-list i { color: var(--jf-text); font-size: 20px; }
#sp-footer .jf-social a:hover i, #sp-footer .jf-social a:focus-visible i { color: var(--jf-gold); }
#sp-footer .jf-award img { display: block; }

/* newsletter form */
#sp-footer .jf-form .sppb-form-group input.sppb-form-control { border-color: var(--jf-gold); color: var(--jf-text); background: transparent; box-shadow: none; }
#sp-footer .jf-form .sppb-form-group input.sppb-form-control:focus-visible { border-color: var(--jf-text); outline: 2px solid var(--jf-gold); outline-offset: 2px; }
#sp-footer .jf-form .sppb-form-group input::placeholder { color: var(--jf-text); opacity: 1; }
#sp-footer .jf-form .sppb-form-builder-required { color: #ffb4a8; font-size: 13px; padding-left: 15px; }
#sp-footer .jf-form .sppb-form-check { position: relative; margin: 12px 0 22px; padding: 0 0 0 35px; }
#sp-footer .jf-form .sppb-form-check-input { position: absolute; left: 0; top: 3px; width: 20px; height: 20px; margin: 0; opacity: 0; cursor: pointer; }
#sp-footer .jf-form .sppb-form-check-label { display: block; padding: 0 !important; margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 25px; cursor: pointer; }
#sp-footer .jf-form .sppb-form-check-label::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border: 1px solid var(--jf-gold); border-radius: 50%; background: transparent; }
#sp-footer .jf-form .sppb-form-check-label::after { display: none; }
#sp-footer .jf-form .sppb-form-check-input:checked + .sppb-form-check-label::before { background: var(--jf-gold); box-shadow: inset 0 0 0 4px var(--jf-bg); }
#sp-footer .jf-form .sppb-form-check-input:focus-visible + .sppb-form-check-label::before { outline: 2px solid var(--jf-text); outline-offset: 2px; }
#sp-footer .jf-form .sppb-btn { background-color: var(--jf-cta) !important; border-color: var(--jf-cta) !important; color: var(--jf-ink) !important; min-height: 51px; }
#sp-footer .jf-form .sppb-btn:hover, #sp-footer .jf-form .sppb-btn:focus-visible { background-color: var(--jf-gold) !important; border-color: var(--jf-gold) !important; }
#sp-footer .jf-form .sppb-ajax-contact-status span { color: var(--jf-text); font-size: 14px; }

/* bottom line: logo, legal links, copyright */
#sp-footer .jf-bottom .sppb-row-container > .sppb-row { border-top: 1px solid var(--jf-line); padding-top: 28px; align-items: flex-end; }
#sp-footer .jf-col--logo .sppb-addon-image-wrapper, #sp-footer .jf-col--logo .sppb-addon-content { text-align: left; }
#sp-footer .jf-logo img { display: block; }
#sp-footer .jf-col--meta .sppb-column-addons { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; column-gap: 30px; }
#sp-footer .jf-col--meta :is(.sppb-addon-wrapper, .clearfix, .sppb-addon, .sppb-addon-content, .mod-custom) { display: contents; }
#sp-footer .jf-col--meta style { display: none; }
#sp-footer .jf-col--meta ul.jf-list { display: flex; gap: 30px; }
#sp-footer .jf-col--meta ul.jf-list > li > a, #sp-footer .jf-col--meta p { font-size: 13px; line-height: 25px; }
#sp-footer .jf-col--meta .mod-custom p:last-child { flex-basis: 100%; text-align: right; }

@media (max-width: 991.98px) {
  #sp-footer .jf-press-row { row-gap: 28px; }
  #sp-footer .jf-press-row > * { flex: 0 0 33.333%; display: flex; justify-content: center; }
  #sp-footer .jf-col { padding-left: 0; padding-right: 0; margin-bottom: 40px; }
  #sp-footer .jf-main .sppb-row > div:has(> .jf-col--news) { order: 1; }
  #sp-footer .jf-main .sppb-row > div:has(> .jf-col--menu) { order: 2; }
  #sp-footer .jf-main .sppb-row > div:has(> .jf-col--touch) { order: 3; }
  #sp-footer .jf-main .sppb-row > div:has(> .jf-col--awards) { order: 4; }
  #sp-footer .jf-main .sppb-row > div:has(> .jf-col--news), #sp-footer .jf-main .sppb-row > div:has(> .jf-col--touch) { padding-right: 20px; }
  #sp-footer .jf-awards { justify-content: flex-start !important; }
  #sp-footer .jf-award img { width: 100px !important; }
}
@media (max-width: 767.98px) {
  #sp-footer .jf-press-row > * { flex-basis: 50%; }
  #sp-footer .jf-main .sppb-row > div { padding-right: 0 !important; }
  #sp-footer .jf-col { margin-bottom: 32px; }
  /* phones: every footer link is at least 40px tall to tap */
  #sp-footer ul.jf-list > li > a { display: inline-flex; align-items: center; min-height: 40px; min-width: 40px; }
  #sp-footer .jf-text a { display: inline-flex; align-items: center; min-height: 40px; }
  #sp-footer .jf-text br { display: none; }
  #sp-footer .jf-text p:not(.jf-title) { display: flex; flex-direction: column; align-items: flex-start; }
  #sp-footer .jf-social .sppb-icons-group-list { margin-left: -10px; }
  #sp-footer .jf-social .sppb-icons-group-list a { width: 42px; height: 42px; }
  #sp-footer .jf-col--meta ul.jf-list { gap: 20px; }
  #sp-footer .jf-col--logo { display: none; }
  #sp-footer .jf-col--meta { margin-bottom: 0; }
  #sp-footer .jf-col--meta .sppb-column-addons { justify-content: flex-start; }
  #sp-footer .jf-col--meta ul.jf-list { flex-basis: 100%; }
  #sp-footer .jf-col--meta .mod-custom p { flex-basis: 100%; }
  #sp-footer .jf-col--meta .mod-custom p:last-child { text-align: left; }
}

/* ---- Home page: "Our destinations" swaps its photo on hover (D64) ---------------------------------------------------------------------
   The section (dev/tools/gen_home.py) has a photo for every region stacked in its left column (".hd-slide") and the list of regions in the
   right one (".hd-list"). js/custom.js marks the photo and the list entry for the region pointed at ".is-active"; without the script the first
   photo shows. On phones the list gives way to a grid of photo tiles, each with its region's name. */
.hd-section .sppb-col-md-6:first-child .sppb-column-addons { display: grid; position: relative; }
.hd-section .sppb-col-md-6:first-child .sppb-column-addons > .sppb-addon-wrapper { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0s linear 0.4s; }
.hd-section:not(.is-ready) .sppb-col-md-6:first-child .sppb-column-addons > .sppb-addon-wrapper:first-child,
.hd-section .sppb-col-md-6:first-child .sppb-column-addons > .sppb-addon-wrapper.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
.hd-slide { position: relative; }
.hd-slide .sppb-addon-wrapper { margin: 0; }
.hd-photo img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.hd-slide::after { content: ""; position: absolute; inset: auto 0 0 0; height: 110px; background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)); pointer-events: none; }
.hd-pin { position: absolute; left: 20px; bottom: 16px; z-index: 2; }
.hd-pin p { margin: 0; font-size: 14px; line-height: 1.4; color: #fff; }
.hd-pin p::before { content: ""; display: inline-block; width: 10px; height: 15px; margin-right: 8px; vertical-align: -2px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 15'%3E%3Cpath fill='%23fff' d='M5 0a5 5 0 0 0-5 5c0 3.4 5 10 5 10s5-6.600 5-10a5 5 0 0 0-5-5zm0 7a2 2 0 1 1 0-4 2 2 0 0 1 0 4z'/%3E%3C/svg%3E"); }
.hd-name { display: none; }
.hd-title p { margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--jt-line, #e8e2d6); }
.hd-section .hd-list li { margin: 0 0 9px !important; }
.hd-section .hd-listbox .hd-list a { color: var(--jt-ink) !important; opacity: 0.5; font-size: clamp(28px, 3.1vw, 45px) !important; line-height: 1 !important; min-height: 0 !important; transition: opacity 0.3s ease-in-out; }
.hd-section:not(.is-ready) .hd-list li:first-child a, .hd-section .hd-list a.is-active, .hd-section .hd-list a:hover, .hd-section .hd-list a:focus-visible { opacity: 1; }
@media (max-width: 991.98px) {
  .hd-section .sppb-row { display: flex; flex-direction: column; }
  .hd-section .sppb-col-md-6:last-child { order: -1; }
  .hd-section .sppb-col-md-6:last-child .sppb-column { padding: 36px 13px 16px !important; }
  .hd-listbox { display: none; }
  .hd-section .hd-title p { text-align: center; font-family: var(--sb-font-head, "Instrument Serif", Georgia, serif); font-size: 30px; line-height: 1.2; color: var(--jt-ink) !important; margin: 0; padding: 0; border: 0; }
  .hd-section .sppb-col-md-6:first-child .sppb-column-addons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 13px 28px; }
  .hd-section .sppb-col-md-6:first-child .sppb-column-addons > .sppb-addon-wrapper { grid-area: auto; opacity: 1 !important; visibility: visible !important; }
  .hd-photo img { aspect-ratio: 175 / 142; border-radius: 4px; }
  .hd-slide::after { inset: 0; height: auto; border-radius: 4px; background: rgba(0, 0, 0, 0.22); }
  .hd-pin { display: none; }
  .hd-name { display: flex; position: absolute; inset: 0; z-index: 2; align-items: center; justify-content: center; pointer-events: none; }
  .hd-name p { margin: 0; color: #fff; font-size: 20px; line-height: 1.2; }
}

/* ---- Sticky bottom bar: My Inspiration, Contact a Travel Designer (D64) ---------------------------------------------------------------
   The last section of the Footer layout (dev/tools/gen_footer.py). js/custom.js shows it (".is-on") to visitors who have used the trip planner
   (it keeps their answers in the browser) and fades it out while the footer's own columns are in view. */
#sp-footer .jf-inspire.sppb-section { display: none; position: fixed !important; left: 0; right: 0; bottom: 0; top: auto; z-index: 150; padding: 0 !important; background-color: var(--jf-band, #1a1a1a) !important; transition: opacity 0.3s ease-in-out; }
#sp-footer .jf-inspire.sppb-section.is-on { display: block; }
#sp-footer .jf-inspire.is-hidden { opacity: 0; pointer-events: none; }
#sp-footer .jf-inspire :is(.sppb-row-container, .sppb-container-inner) { max-width: 1280px; margin: 0 auto; padding: 15px 15px; }
#sp-footer .jf-inspire .sppb-row { margin: 0; }
#sp-footer .jf-inspire .sppb-row > [class*="sppb-col-"] { padding: 0; }
#sp-footer .jf-inspire .sppb-column-addons { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#sp-footer .jf-inspire .sppb-addon-wrapper { margin: 0 !important; }
#sp-footer .jf-inspire .sppb-btn { display: inline-flex; align-items: center; gap: 10px; font-family: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14.86px; line-height: 1.4; box-shadow: none; }
#sp-footer .jf-inspire .sppb-btn i { margin: 0; }
#sp-footer .jf-inspire .jf-mine.sppb-btn { background: none !important; border: 0 !important; color: #fff !important; text-transform: uppercase; letter-spacing: 1px; padding: 10px 20px; border-radius: 2px; }
#sp-footer .jf-inspire .jf-mine.sppb-btn::before { content: "\2190"; font-size: 22px; line-height: 1; letter-spacing: 0; margin-right: 6px; }
#sp-footer .jf-inspire .jf-mine.sppb-btn i { color: var(--jf-gold, #c1aa7f); font-size: 24px; margin-left: 8px; }
#sp-footer .jf-inspire .jf-mine.sppb-btn:hover, #sp-footer .jf-inspire .jf-mine.sppb-btn:focus-visible { color: var(--jf-gold, #c1aa7f) !important; }
#sp-footer .jf-inspire .jf-contact.sppb-btn { padding: 13px 24px; border-radius: 60px; gap: 12px; }
@media (max-width: 767.98px) {
  #sp-footer .jf-inspire :is(.sppb-row-container, .sppb-container-inner) { max-width: none; padding: 0; }
  #sp-footer .jf-inspire .sppb-column-addons { gap: 0; align-items: stretch; }
  #sp-footer .jf-inspire .sppb-column-addons > .sppb-addon-wrapper { flex: 1 1 50%; min-width: 0; }
  #sp-footer .jf-inspire .sppb-addon, .jf-inspire .sppb-addon-content, .jf-inspire .sppb-button-wrapper, .jf-inspire .sppb-btn { height: 100%; }
  #sp-footer .jf-inspire .sppb-btn { width: 100%; justify-content: center; font-size: 12px; min-height: 61px; padding: 10px 12px !important; border-radius: 0 !important; text-align: center; }
  #sp-footer .jf-inspire .jf-mine.sppb-btn { padding-left: 14px !important; }
  #sp-footer .jf-inspire .jf-mine.sppb-btn i { display: none; }
  #sp-footer .jf-inspire .jf-mine.sppb-btn::before { font-size: 20px; margin-right: 10px; }
  #sp-footer .jf-inspire .jf-contact.sppb-btn { line-height: 1.3; }
}