/* =====================================================================
   COMPONENTS — reusable pieces: buttons, header, logo slot, cards,
   form controls, badges. Section-specific layout lives in sections.css.
   ===================================================================== */

/* ---------------------------------------------------------------
   BUTTONS
   --------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  line-height: 1.1;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-align: center;
  transition:
    background-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn__icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: currentColor;
}

/* Yellow accent — the primary "do this" action (WhatsApp) */
.btn--accent {
  background-color: var(--color-accent);
  color: var(--color-ink-900);
  box-shadow: var(--shadow-accent);
}

.btn--accent:hover {
  background-color: var(--color-accent-hover);
  box-shadow: 0 16px 34px -8px rgba(255, 160, 0, 0.55);
}

/* Solid green — secondary action */
.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
}

.btn--primary:hover { background-color: var(--color-primary-hover); }

/* Outlined — tertiary */
.btn--outline {
  background-color: transparent;
  color: var(--color-primary);
  box-shadow: inset 0 0 0 2px var(--color-primary);
}

.btn--outline:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn--ghost-light {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4);
}

.btn--ghost-light:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.btn--lg {
  padding: var(--space-lg) var(--space-2xl);
  font-size: var(--text-md);
}

.btn--sm {
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--text-sm);
}

.btn--block { width: 100%; }

/* Text link with a sliding arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  border-bottom: 2px solid transparent;
  transition: border-color var(--duration-base) var(--ease-out);
}

.link-arrow svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  transition: transform var(--duration-base) var(--ease-out);
}

.link-arrow:hover { border-bottom-color: var(--color-accent); }
.link-arrow:hover svg { transform: translateX(5px); }

.link-arrow--on-dark { color: var(--color-accent); }

/* ---------------------------------------------------------------
   LOGO
   The mark carries its own wordmark, but in a 72px bar that artwork
   is only a few pixels tall and "UNCOVERED" turns to mush. In the
   header the name is therefore set again beside it in live text,
   which stays crisp at any size and gives the link its accessible
   name. The footer mark is large enough to speak for itself.
   --------------------------------------------------------------- */

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  flex: none;
}

/* <picture> only picks between the WebP and the PNG — it must not add a
   line box of its own between the link and the image. */
.logo picture {
  display: flex;
}

.logo__img {
  display: block;
  height: var(--logo-height);
  width: auto;
  /* The source is 771 x 545, so reserve that ratio while it loads */
  aspect-ratio: 771 / 545;
  object-fit: contain;
}

/* On the dark footer the logo's deep-green wordmark would disappear, so
   it sits on a light chip that keeps every original colour readable. */
.logo--on-dark {
  /* The footer brand column is a grid, which blockifies and stretches its
     items, so the chip has to be told to hug its logo instead. */
  justify-self: start;
  align-self: start;
  width: fit-content;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background-color: var(--color-canvas);
  box-shadow: var(--shadow-sm);
}

/* The footer is not a tight bar, so the mark can sit a size larger there. */
.logo--on-dark .logo__img { height: calc(var(--logo-height) * 1.3); }

/* The name beside the mark. One line rather than a stacked lockup: the
   artwork is already a stack, and repeating that shape next to it reads as
   a mistake. The size is tied to the mark so the two scale together. */
.logo__word {
  font-family: var(--font-display);
  font-size: calc(var(--logo-height) * 0.37);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--color-green-800);
  white-space: nowrap;
}

/* The second word a shade lighter, so the pair has the same two-tone
   texture as the mark instead of sitting there as one solid block. */
.logo__word span {
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
}

/* ---------------------------------------------------------------
   HEADER / NAV
   --------------------------------------------------------------- */

/* A solid light bar at every scroll position: the logo's deep-green
   wordmark needs a light surface behind it to stay legible. */
.header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  height: var(--header-height);
  display: flex;
  align-items: center;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--duration-base) var(--ease-out);
}

/* Once the page scrolls, the bar lifts a little off the content */
.header.is-stuck { box-shadow: var(--shadow-sm); }

.header__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  width: 100%;
}

.nav { display: flex; align-items: center; gap: var(--space-xl); }

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin: 0;
  list-style: none;
  padding: 0;
}

.nav__link {
  position: relative;
  padding-block: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--color-accent);
  border-radius: var(--radius-pill);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__link:hover { color: var(--color-green-800); }

/* Hamburger */
.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: var(--radius-sm);
  color: var(--color-primary);
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 24px;
  height: 2.5px;
  background-color: currentColor;
  border-radius: var(--radius-pill);
  transition: transform var(--duration-base) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
}

.nav-toggle__bars::before { transform: translateY(-7px); }
.nav-toggle__bars::after  { transform: translateY(7px); }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background-color: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: rotate(-45deg); }

/* ---------------------------------------------------------------
   PILL / BADGE
   --------------------------------------------------------------- */

.pill {
  display: inline-flex;
  /* A grid or flex parent blockifies inline-flex, which would stretch the
     pill across the whole column — keep it hugging its own text. */
  width: fit-content;
  justify-self: start;
  align-self: start;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-2xs) var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  background-color: var(--color-primary-soft);
  color: var(--color-green-800);
}

.pill--accent {
  background-color: var(--color-accent);
  color: var(--color-ink-900);
}

.pill--on-photo {
  background-color: rgba(13, 51, 17, 0.62);
  color: var(--color-accent);
  backdrop-filter: blur(8px);
}

/* ---------------------------------------------------------------
   FORM CONTROLS
   --------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: var(--space-xs); }

.field__label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-ink-800);
}

.field__hint {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

.field__control {
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--color-text);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.field__control::placeholder { color: var(--color-ink-400); }

.field__control:hover { border-color: var(--color-border-strong); }

.field__control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(27, 94, 32, 0.14);
}

textarea.field__control {
  min-height: 118px;
  resize: vertical;
  line-height: var(--leading-normal);
}

select.field__control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2365776a'%3E%3Cpath d='M12 15.5 5.5 9h13z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-md) center;
  background-size: 22px;
  padding-right: var(--space-2xl);
  cursor: pointer;
}

/* Interest chips — checkbox styled as a selectable pill */
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.chip { position: relative; }

.chip__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.chip__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-700);
  cursor: pointer;
  user-select: none;
  transition: all var(--duration-fast) var(--ease-out);
}

.chip__label:hover { border-color: var(--color-primary); }

.chip__input:checked + .chip__label {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.chip__input:focus-visible + .chip__label {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}


/* ---------------------------------------------------------------
   FLOATING WHATSAPP BUTTON
   --------------------------------------------------------------- */

.whatsapp-float {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: var(--z-sticky);
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.94);
  transition:
    opacity var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-spring),
    visibility var(--duration-base),
    background-color var(--duration-base) var(--ease-out);
}

.whatsapp-float.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.whatsapp-float:hover { background-color: var(--color-green-800); }

.whatsapp-float svg {
  width: 22px;
  height: 22px;
  fill: var(--color-accent);
  flex: none;
}

@media (max-width: 560px) {
  .whatsapp-float__text { display: none; }
  .whatsapp-float { padding: var(--space-md); }
}

/* ---------------------------------------------------------------
   ICON SPRITE HELPERS
   The sprite is inlined at the top of <body> so <use> resolves even
   when the page is opened straight off disk (file://).
   --------------------------------------------------------------- */

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 1em;
  height: 1em;
  flex: none;
  fill: currentColor;
}

/* Anchor for the hamburger's rotating bars */
.nav-toggle__bars { position: relative; }

/* ---------------------------------------------------------------
   MOBILE NAVIGATION DRAWER
   Eight destinations in the menu is too many for a narrow bar, so it
   collapses early — at 1080px rather than a typical 768px.
   --------------------------------------------------------------- */

@media (max-width: 1080px) {
  .nav-toggle { display: grid; }

  .nav {
    position: fixed;
    inset-block-start: var(--header-height);
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-lg);
    padding: var(--space-lg) var(--gutter) var(--space-2xl);
    background-color: var(--color-canvas);
    border-top: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    max-height: calc(100svh - var(--header-height));
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition:
      opacity var(--duration-base) var(--ease-out),
      transform var(--duration-base) var(--ease-out),
      visibility var(--duration-base);
  }

  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__link {
    display: block;
    padding-block: var(--space-md);
    font-size: var(--text-md);
    color: var(--color-ink-800);
    border-bottom: 1px solid var(--color-border);
  }

  .nav__link::after { display: none; }

  .nav__link:hover,
  .nav__link[aria-current="page"] { color: var(--color-primary); }

  .nav .btn { width: 100%; }
}

/* =====================================================================
   BOOKING DIALOG

   Opened by any [data-book-open] button -- at the moment the hero's
   "Book Now" -- and driven by js/main.js. A centred panel rather than a
   side sheet: it is a five-question form, not a page of its own, and
   there is nothing behind it worth keeping in view. The panel scrolls
   inside itself so the page underneath never moves while it is open.

   The markup reuses .form-grid, .field and .form-status from the
   consultation form, so only the shell is new.
   ===================================================================== */

.bkg {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--space-md);
}

.bkg[hidden] { display: none; }

.bkg__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(13, 51, 17, 0.52);
  opacity: 0;
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  transition: opacity var(--duration-base) var(--ease-out);
  cursor: pointer;
}

.bkg__dialog {
  position: relative;
  width: min(34rem, 100%);
  /* svh, so a phone with its toolbars showing still gets the whole
     panel on screen; the vh line is the fallback for browsers without
     the small-viewport units. */
  max-height: calc(100vh - var(--space-xl));
  max-height: calc(100svh - var(--space-xl));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition:
    opacity var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.bkg.is-open .bkg__backdrop { opacity: 1; }

.bkg.is-open .bkg__dialog {
  opacity: 1;
  transform: none;
}

/* In the corner of the panel rather than in the flow of the heading, so
   the title keeps the whole width it is given. On a short screen the
   panel scrolls and this scrolls with it -- Escape and a tap on the
   backdrop close the dialog from anywhere, so there is always a way out. */
.bkg__close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 1;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 0;
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-muted);
  color: var(--color-green-900);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.bkg__close .icon { width: 18px; height: 18px; }

.bkg__close:hover {
  background-color: var(--color-accent);
  transform: rotate(90deg);
}

.bkg__title {
  /* Clear of the close button, which overlaps the first line. */
  margin: 0 var(--space-2xl) 0 0;
  font-size: var(--text-xl);
}

.bkg__intro {
  margin-block: var(--space-xs) var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-ink-700);
}

/* The shared grid drops to one column below 1025px, which is right for
   the full-width consultation form and too tall for a panel. Two short
   selects sit side by side here on anything but the narrowest phone. */
@media (min-width: 400px) {
  .bkg__dialog .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.bkg__send { margin-top: var(--space-lg); }

.bkg__dialog .form-status { margin-top: var(--space-md); }

@media (max-width: 480px) {
  .bkg { padding: var(--space-xs); }

  .bkg__dialog {
    padding: var(--space-lg) var(--space-md) var(--space-md);
    border-radius: var(--radius-md);
  }

  .bkg__close {
    top: var(--space-xs);
    right: var(--space-xs);
  }

  .bkg__title {
    margin-right: var(--space-xl);
    font-size: var(--text-lg);
  }
}