@charset "UTF-8";
/* ==========================================================================
   Hotel Ocean - hand-written site styles.
   --------------------------------------------------------------------------
   The rest of the site's CSS is a purged Tailwind bundle emitted by the
   Next.js build (assets/css/0mcr_9p5pyray.css). That file is build output and
   a rebuild overwrites it, so nothing hand-written may live there. This file
   is the place for styles added after the export.

   Because the Tailwind build is PURGED, most utility classes simply are not in
   it - `border-red-600`, `mt-1` and friends do not exist. Anything needed here
   is therefore written out in full against the site's own palette:

     ocean  #0485bc    deep #07223a    cream #fcf6f3
     red    #e40014    muted #6b6663

   Loaded by: contact-us.php, thank-you.php
   ========================================================================== */

/* ==========================================================================
   Contact form validation
   --------------------------------------------------------------------------
   Paired with assets/js/contact-form.js, which adds and removes the classes.
   These used to be injected as a <style> element from that script; they are
   here so the styling lives with the other styling.
   ========================================================================== */

/* A validation message under a field. */
.ho-err {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-red-600, #e40014);
}

/* The form-wide message under the button, for a failure that belongs to no
   single field - a rate-limit rejection, or the server being unreachable. */
.ho-err--form {
  text-align: center;
}

/* The field the message belongs to. !important because the site's own
   utility classes set a border colour on these inputs at the same
   specificity, and the invalid state has to win. */
.ho-field-invalid,
.ho-field-invalid:focus {
  border-color: var(--color-red-600, #e40014) !important;
}

/* --------------------------------------------------------------------------
   Keeping each message under its own field.

   The name/email row is a CSS grid that is one column on small screens and
   two from 640px up - the same `sm:` breakpoint the site itself uses. Source
   order alone puts both messages after both fields, which reads correctly on
   neither layout, so the order is set explicitly per breakpoint.

   This is done with `order` rather than by wrapping each field in a new
   element, because the surrounding markup is React-hydrated and must not be
   restructured.
   -------------------------------------------------------------------------- */

/* One column: field, its message, next field, its message. */
[name="name"]          { order: 1; }
[data-ho-for="name"]   { order: 2; }
[name="email"]         { order: 3; }
[data-ho-for="email"]  { order: 4; }

/* Two columns: both fields on the first row, both messages on the second, so
   each still sits directly beneath its own field. */
@media (min-width: 640px) {
  [name="email"]        { order: 2; }
  [data-ho-for="name"]  { order: 3; }
  [data-ho-for="email"] { order: 4; }
}

/* The phone row is two columns at every width, with the dial-code select
   first, so its message belongs in the second column. */
[data-ho-for="phone"] {
  grid-column: 2;
}

/* ==========================================================================
   Shared navbar
   --------------------------------------------------------------------------
   Paired with assets/js/site.js, which toggles the class.
   ========================================================================== */

/* While the mobile drawer is open, the page behind it must not scroll with
   it. Set on <html> rather than <body> so it holds on iOS too. */
.nav-open {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   The bar going solid on scroll.

   On a page with a hero the navbar starts transparent over the photograph and
   turns opaque once you scroll past it. React used to do this - it listened
   for scroll and re-rendered the bar - so removing React removed the effect
   and the bar stayed see-through all the way down the page.

   Now site.js only adds and removes .is-solid, and these rules are the whole
   appearance. The transitions are already on the elements from the markup, so
   it still fades rather than snaps.

   Each rule has to out-specify the utility class the markup ships with -
   .opacity-0 on the backdrop, .text-white/80 on the top bar - which a
   two-class descendant selector does comfortably.
   -------------------------------------------------------------------------- */

header[data-nav].is-solid .ho-nav__backdrop {
  opacity: 1;
  border-color: rgb(255 255 255 / 0.1);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* The gradient that keeps white text readable over a photograph is only
   needed while the photograph is what is behind the text. */
header[data-nav].is-solid .ho-nav__scrim {
  opacity: 0;
}

header[data-nav].is-solid .ho-nav__topbar {
  border-color: rgb(255 255 255 / 0.1);
  color: rgb(255 255 255 / 0.6);
}

/* The links carry a text-shadow for legibility over the hero. Against a flat
   deep-navy bar it just looks smudged. Cleared here rather than by swapping
   the class on every link. */
header[data-nav].is-solid a,
header[data-nav].is-solid button,
header[data-nav].is-solid .ho-nav__topbar {
  text-shadow: none;
}

/* ==========================================================================
   Hero slideshow
   --------------------------------------------------------------------------
   The markup and most of the styling are Swiper's and still come from the
   CSS bundle; what Swiper's JavaScript used to add was the movement. site.js
   sets the transform, and this gives it something to animate.
   ========================================================================== */

.swiper-wrapper {
  transition: transform 900ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* The bullets are <button>s built by site.js, so they need the reset a
   button needs; everything else about them is Swiper's. */
.swiper-pagination .swiper-pagination-bullet {
  appearance: none;
  padding: 0;
  border: 0;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .swiper-wrapper {
    transition: none;
  }
}

/* ==========================================================================
   FAQ accordion
   --------------------------------------------------------------------------
   The exported markup collapses each answer with Tailwind's
   grid-rows-[0fr] / grid-rows-[1fr] pair - neither of which is in the
   stylesheet, because the production build purged them as unused. So the
   accordion could never have animated. These two rules are the replacement,
   and site.js only adds and removes .is-open.
   ========================================================================== */

.ho-faq {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 300ms ease-out, visibility 300ms;
}

.ho-faq.is-open {
  grid-template-rows: 1fr;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .ho-faq {
    transition: none;
  }
}

/* ==========================================================================
   Gallery lightbox
   --------------------------------------------------------------------------
   The full-screen photo viewer on gallery.php. site.js builds the <dialog>
   and opens it with showModal(); this is the whole of its appearance.

   The dialog itself is transparent and fills the viewport, so a click beside
   the photo lands on it and closes it. The darkening is ::backdrop.
   ========================================================================== */

.lightbox-open {
  overflow: hidden;
}

.ho-lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 1.5rem 6rem;
  border: 0;
  background: transparent;
  color: #fff;
  overflow: hidden;
}

/* Only while open - a closed <dialog> has to stay display:none. */
.ho-lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ho-lightbox::backdrop {
  background: rgb(0 0 0 / 0.9);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.ho-lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  max-width: 100%;
  margin: 0;
}

/* Sized by whichever runs out first, the height or the width, so a tall
   photo and a wide one both fit without cropping. */
.ho-lightbox__img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 80rem);
  max-height: calc(100vh - 12rem);
  max-height: calc(100dvh - 12rem);
  border-radius: 0.5rem;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5);
}

.ho-lightbox__count {
  font-family: var(--font-heading, inherit);
  font-size: 0.8125rem;
  letter-spacing: 0.15em;
  color: rgb(255 255 255 / 0.7);
}

.ho-lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.1);
  color: #fff;
  cursor: pointer;
  transition: background-color 200ms;
}

.ho-lightbox__btn:hover {
  background: rgb(255 255 255 / 0.2);
}

.ho-lightbox__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.ho-lightbox__btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

.ho-lightbox__close {
  top: 0.875rem;
  right: 0.875rem;
}

.ho-lightbox__prev,
.ho-lightbox__next {
  top: 50%;
  width: 3.875rem;
  height: 3.875rem;
  transform: translateY(-50%);
}

.ho-lightbox__prev { left: 1.25rem; }
.ho-lightbox__next { right: 1.25rem; }

/* On a phone there is no room beside the photo, so the arrows sit over its
   edges instead, on a darker disc that stays visible against a bright sky. */
@media (max-width: 639px) {
  .ho-lightbox {
    padding: 4.5rem 0.75rem;
  }

  .ho-lightbox__prev,
  .ho-lightbox__next {
    width: 2.75rem;
    height: 2.75rem;
    background: rgb(0 0 0 / 0.45);
  }

  .ho-lightbox__prev { left: 1.25rem; }
  .ho-lightbox__next { right: 1.25rem; }
}

.ho-lightbox[open],
.ho-lightbox[open]::backdrop {
  animation: ho-lightbox-in 200ms ease-out;
}

@keyframes ho-lightbox-in {
  from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ho-lightbox[open],
  .ho-lightbox[open]::backdrop {
    animation: none;
  }
}

/* ==========================================================================
   Hero booking bar
   --------------------------------------------------------------------------
   The "Check In" / "Check Out" controls stay exactly as the design has them:
   a label, an "Add date" value and a calendar icon, all inside a button.
   site.js parks a real <input type="date"> behind each one so the browser
   supplies the calendar, and writes the chosen date back into the button.

   The input must stay rendered - showPicker() will not open a calendar for a
   display:none element - so it is made invisible and untouchable instead. It
   never receives a click, because the button on top is what the visitor
   presses.
   ========================================================================== */

.ho-date-field {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   Thank-you page
   --------------------------------------------------------------------------
   A standalone confirmation: no navbar, no footer, one centred card, and it
   returns to the home page after five seconds.

   Written out in full rather than assembled from utility classes. The
   Tailwind bundle is PURGED, so it contains only what the exported pages
   happened to use - this page is hand-written and cannot rely on any
   particular class having survived.
   ========================================================================== */

.ho-thanks {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2.5rem 1.5rem;
  overflow: hidden;
  background: var(--color-deep, #07223a);
}

/* The photograph, full-bleed behind everything. */
.ho-thanks__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Three scrims in one element: a flat wash to knock the photograph back, a
   vignette to darken the corners, and a top-to-bottom gradient. Same recipe
   as the hero sections on the rest of the site - it is what keeps white text
   readable over any part of the image. */
.ho-thanks__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 50% 48%, rgba(0, 0, 0, 0.72), transparent 78%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0.6)),
    rgba(0, 0, 0, 0.4);
}

.ho-thanks__card {
  position: relative;   /* above the scrim */
  z-index: 1;
  width: 100%;
  max-width: 34rem;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.45);
}

.ho-thanks__logo {
  width: 13rem;
  height: auto;
  margin: 0 auto 2.25rem;
}

/* The eyebrow keeps the ocean blue used across the site, but lifted so it
   holds up against the photograph. */
.ho-thanks__eyebrow {
  margin: 0;
  font-family: var(--font-heading, inherit);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.ho-thanks__title {
  margin: 0.75rem 0 0;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(2.75rem, 8vw, 4rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #fff;
}

.ho-thanks__lede {
  margin: 1.25rem 0 0;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
}

.ho-thanks__tel {
  color: #fff;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}

.ho-thanks__tel:hover {
  border-bottom-color: #fff;
}

.ho-thanks__timer {
  margin: 2rem 0 0;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.6);
}

.ho-thanks__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.25rem;
  margin-top: 1.25rem;
}

.ho-thanks__btn {
  display: inline-flex;
  align-items: center;
  padding: 0.8rem 1.75rem;
  border-radius: 0.375rem;
  background: var(--color-ocean, #0485bc);
  font-family: var(--font-heading, inherit);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  transition: background-color 200ms;
}

.ho-thanks__btn:hover {
  background: var(--color-ocean-dark, #036c99);
}

/* Plain text, not a second call to action - it must not compete with the
   button beside it. */
.ho-thanks__stay {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.ho-thanks__stay:hover {
  color: #fff;
}
