/* Site overrides, loaded straight after the theme's style.css. */

/* Logo: 32px in from the left edge on desktop, where the theme pins it absolutely. A
   transform rather than `left`, because the logo is sized by its column and `left` would
   shrink it by the same 32px. Below 992px it is centred above the menu and left alone. */
@media (min-width: 992px) {
  .logo { transform: translateX(32px); }
}

/* ---------------------------------------------------------------------------------------
   Accessibility, WCAG 2.1 AA. Colours move to the nearest shade of the same hue that
   reaches 4.5:1; everything else is invisible until used with a keyboard or screen reader.
   --------------------------------------------------------------------------------------- */

/* Skip link: off screen until focused. */
.vm-skip { position: absolute; left: -9999px; top: 0; z-index: 100000; padding: 12px 18px; background: #252525; color: #fff; font-weight: 700; text-decoration: underline; }
.vm-skip:focus { left: 8px; top: 8px; color: #fff; outline: 3px solid #ffe4c1; }

/* Keyboard focus: visible ring, keyboard only, so mouse users see no change. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible,
[role="button"]:focus-visible, [tabindex]:focus-visible, .responsive-tabs__list__item:focus-visible {
  outline: 3px solid #1d828a !important; outline-offset: 2px;
}
footer a:focus-visible, header a:focus-visible, .header-book-now a:focus-visible { outline-color: #ffe4c1 !important; }
main:focus, #main:focus { outline: none; }

/* Contrast. Coral buttons keep the coral and take charcoal text (6.6:1); white text on
   that coral is 2.3:1, and a coral dark enough for white would be a different colour. */
.btn-orange, .btn-orange:focus { color: #252525; }
.btn-orange:hover { color: #252525; }
.header-book-now a.btn-orange, .header-book-now a.btn-orange:hover { color: #252525; } /* theme sets white here */
.fp-book-content a { color: #df3500; }                          /* was #ff8964, 2.3:1 */
.fp-orange-quote { background: #ff602e; }                       /* large bold white text needs 3:1; was 2.3:1 */
.header-book-now { background: #1d828a; }                      /* was #1f8991, 4.16:1 */
footer .footer-nav a { color: #8a8c8e; }                         /* was #808285, 3.98:1 */
article a { color: #ed0033; }                                    /* was #ff3964, 3.49:1 */
/* Tabby and the share buttons load their stylesheets after this one, so these need weight. */
body .responsive-tabs .responsive-tabs__list__item,
body .responsive-tabs .responsive-tabs__heading,
body .responsive-tabs .responsive-tabs__heading:hover { color: #767676; } /* were #999 and #777 */
body .responsive-tabs .responsive-tabs__heading:after,
body .responsive-tabs .responsive-tabs__heading:hover:after { border-top-color: #767676; }
body .responsive-tabs .responsive-tabs__heading--active,
body .responsive-tabs .responsive-tabs__heading--active:hover { background: #767676; color: #fff; } /* was white on #ccc */
body .responsive-tabs .responsive-tabs__heading--active:after { border-bottom-color: #fff; }
body .essb_links .essb_link_twitter { --essb-network: #007eb1 !important; } /* was #00abf0, 2.6:1 */

/* Ninja Forms hid its labels with visibility:hidden, which hides them from screen readers
   too. Same zero-height layout, but readable. */
.label-hidden .nf-field-label { visibility: visible !important; position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Respect a reduced-motion preference. vm-a11y.js stops the sliders as well. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}