/* ==========================================================================
   The Good Times button system, every page: "leaf green" (design/button-design.md)
   Loaded after living-cape-system.css. One family of controls for the whole site, every
   colour, size and duration a token (tokens.css for the palette, :root below for the shape):

     .gt-button--primary     Leaf Green: the green pill, white words (the main action of a section)
     .gt-button--secondary   Soft Leaf: a pale-leaf pill, deep-green words, a clean border (View details, Discover more)
     .gt-button--outline     Fresh Air: transparent, a green line and green words (a quiet action on a light ground)
     .gt-button--on-image    On-image: a solid white pill over photographs, legible on any picture
     .gt-button--tertiary    words over a green hairline (a link in a sentence's place)
     .gt-button--utility     compact text-labelled controls (Previous, Next, Back)
     .gt-button--danger      kept apart from green for anything irreversible
     sizes: --compact (44 px), standard (48 px), --large (52 px); --block fills its column
     .gt-button--on-dark     the light-on-dark versions of secondary, tertiary and utility (ocean navy grounds)

   No leaf on the pills (the owner's request of 8 Nov 2026): a pill carries its words alone, centred between equal
   paddings, with an icon before them only where it means something (a car, WhatsApp); the only movement is a lift of
   2 px. Nothing in this family draws a leaf, so none can reappear on a page that uses it. The leaf-shaped calls to
   action of 6 Nov 2026 (the signature leaf: Plan My Day, Request Your Tour, Arrange My Transfer, the home page's
   closing and Peninsula actions) are this standard green pill too since the owner's request of 8 Nov 2026
   (ui.mjs › ctaButton). No control in the family carries an arrow or chevron.
   Contrast (measured): white on --green-primary 5.2:1, on hover 7.0:1, pressed 8.2:1; --green-deep on
   --green-leaf-light 7.0:1; --green-primary on white 5.2:1; --green-deep on white 8.2:1.
   ========================================================================== */

:root {
  /* Shape and size: a pill on a 44 px minimum target */
  --btn-radius: 999px;
  --btn-height: 48px;
  --btn-height-large: 52px;
  --btn-height-compact: 44px;
  --btn-gap: 0.55rem;
  /* Motion: one natural ease, a lift of at most 2 px, nothing loops */
  --btn-lift: -2px;
  --btn-dur: 200ms;
  --btn-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Focus: the ink ring on light grounds, the lime ring on dark grounds and photographs (both over 3:1) */
  --btn-focus: var(--ink-primary);
  --btn-focus-on-dark: var(--green-lime-accent);
  /* Depth: a slim edge at the foot of the pill, and a soft green-tinted shadow */
  --btn-edge: inset 0 -2px 0 rgb(16 91 53 / 0.55);
  --btn-shadow: 0 1px 1px rgb(16 91 53 / 0.16), 0 6px 14px -8px rgb(16 91 53 / 0.6);
  --btn-shadow-hover: 0 2px 3px rgb(16 91 53 / 0.14), 0 12px 22px -10px rgb(16 91 53 / 0.55);
  --btn-press: inset 0 2px 5px rgb(4 40 20 / 0.3);
  /* The gleam from the top left: 12% white at its centre (18% until 8 Nov 2026, when the white words on the green pills
     measured 4.5:1 where it is brightest; at 12% the lowest of every pill on the site is 4.7:1: qa/pill-contrast.mjs) */
  --btn-sheen: radial-gradient(120% 140% at 16% 0%, rgb(255 255 255 / 0.12) 0%, rgb(255 255 255 / 0) 52%);

  /* The earlier system's names, still read by other sheets: the same values */
  --gt-ink: var(--ink-primary);
  --gt-cream: var(--surface-white);
  --gt-green-stroke: var(--green-primary);
  --gt-surface-dark: #102e42;
  --gt-focus: var(--btn-focus);
  --gt-focus-on-dark: var(--btn-focus-on-dark);
  --gt-danger: #a32116;
  --gt-danger-surface: #fff5f3;
  --gt-control-radius: var(--btn-radius);
  --gt-cta-height: var(--btn-height);
  --gt-cta-height-large: var(--btn-height-large);
  --gt-cta-height-compact: var(--btn-height-compact);
  --gt-control-gap: var(--btn-gap);
  --gt-press: var(--btn-dur);
}

/* ---------- The shared base ---------- */
.gt-button {
  --btn-bg: transparent;
  --btn-fg: var(--ink-primary);
  --btn-border: transparent;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  min-height: var(--btn-height);
  padding: 0.625rem 1.4rem;
  border: 1px solid var(--btn-border);
  border-radius: var(--btn-radius);
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--btn-dur) var(--btn-ease),
    box-shadow var(--btn-dur) var(--btn-ease),
    background-color var(--btn-dur) var(--btn-ease),
    border-color var(--btn-dur) var(--btn-ease),
    color var(--btn-dur) var(--btn-ease);
}
.gt-button:hover {
  color: var(--btn-fg);
}
.gt-button .icon,
.gt-button .gt-engraved-icon {
  flex: none;
  width: 18px;
  height: 18px;
}
.gt-button:focus-visible {
  outline: 3px solid var(--btn-focus);
  outline-offset: 3px;
}
.gt-button--on-dark:focus-visible,
.gt-button--on-image:focus-visible,
.lc-dark .gt-button:focus-visible {
  outline-color: var(--btn-focus-on-dark);
}

/* ---------- Primary · Leaf Green ---------- */
.gt-button--primary {
  --btn-bg: var(--green-primary);
  --btn-fg: var(--surface-white);
  --btn-border: var(--green-deep);
  background-image: var(--btn-sheen);
  box-shadow: var(--btn-edge), var(--btn-shadow);
}
.gt-button--primary:hover {
  --btn-bg: var(--green-hover);
  box-shadow: var(--btn-edge), var(--btn-shadow-hover);
}
.gt-button--primary:active {
  --btn-bg: var(--green-deep);
}

/* ---------- Secondary · Soft Leaf ---------- */
.gt-button--secondary {
  --btn-bg: var(--green-leaf-light);
  --btn-fg: var(--green-deep);
  --btn-border: var(--green-leaf-line);
}
.gt-button--secondary:hover {
  --btn-bg: var(--green-leaf-hover);
  --btn-border: var(--green-primary);
  box-shadow: 0 10px 20px -12px rgb(16 91 53 / 0.45);
}
/* On ocean navy: a glass pill with a lime line and white words */
.gt-button--secondary.gt-button--on-dark {
  --btn-bg: rgb(255 255 255 / 0.07);
  --btn-fg: var(--surface-white);
  --btn-border: rgb(201 233 112 / 0.7);
}
.gt-button--secondary.gt-button--on-dark:hover {
  --btn-bg: rgb(255 255 255 / 0.14);
  --btn-border: var(--green-lime-accent);
}
.gt-button--secondary .icon,
.gt-button--secondary .gt-engraved-icon {
  color: var(--green-primary);
}
.gt-button--secondary.gt-button--on-dark .icon,
.gt-button--secondary.gt-button--on-dark .gt-engraved-icon {
  color: var(--green-lime-accent);
}

/* ---------- Outline · Fresh Air ---------- */
.gt-button--outline {
  --btn-bg: transparent;
  --btn-fg: var(--green-primary);
  --btn-border: var(--green-primary);
  border-width: 1.5px;
}
.gt-button--outline:hover {
  --btn-bg: var(--green-soft-background);
  --btn-fg: var(--green-deep);
  --btn-border: var(--green-deep);
}

/* ---------- On-image: solid white over photographs ---------- */
.gt-button--on-image {
  --btn-bg: var(--surface-white);
  --btn-fg: var(--green-deep);
  --btn-border: rgb(255 255 255 / 0.92);
  box-shadow: 0 10px 26px -12px rgb(0 0 0 / 0.6);
}
.gt-button--on-image:hover {
  --btn-bg: var(--green-soft-background);
  --btn-fg: var(--green-deep);
  box-shadow: 0 14px 30px -12px rgb(0 0 0 / 0.62);
}

/* ---------- Tertiary: words over a green hairline ---------- */
.gt-button--tertiary {
  --btn-fg: var(--ink-primary);
  min-height: var(--btn-height-compact);
  padding: 0;
  border: 0;
  border-radius: 4px;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--green-primary);
  text-underline-offset: 6px;
  white-space: normal;
  text-align: left;
}
.gt-button--tertiary:hover {
  --btn-fg: var(--green-hover);
  text-decoration-thickness: 2px;
  text-decoration-color: currentColor;
}
.gt-button--tertiary.gt-button--on-dark {
  --btn-fg: var(--surface-white);
  text-decoration-color: rgb(201 233 112 / 0.8);
}
.gt-button--tertiary.gt-button--on-dark:hover {
  --btn-fg: var(--green-lime-accent);
}

/* ---------- Utility: compact text-labelled controls ---------- */
.gt-button--utility {
  --btn-bg: var(--surface-white);
  --btn-fg: var(--green-deep);
  --btn-border: rgb(20 125 67 / 0.45);
  min-width: var(--btn-height-compact);
  min-height: var(--btn-height-compact);
  padding: 0.5rem 1.1rem;
  font-size: 0.875rem;
}
.gt-button--utility:hover {
  --btn-bg: var(--green-soft-background);
  --btn-border: var(--green-primary);
}
.gt-button--utility.gt-button--on-dark {
  --btn-bg: rgb(255 255 255 / 0.06);
  --btn-fg: var(--surface-white);
  --btn-border: rgb(201 233 112 / 0.55);
}
.gt-button--utility.gt-button--on-dark:hover {
  --btn-bg: rgb(255 255 255 / 0.13);
  --btn-border: var(--green-lime-accent);
}

/* ---------- Danger: never green ---------- */
.gt-button--danger {
  --btn-bg: var(--gt-danger-surface);
  --btn-fg: var(--gt-danger);
  --btn-border: var(--gt-danger);
}
.gt-button--danger:hover {
  --btn-bg: #fde4df;
  --btn-fg: #7f1810;
}

/* ---------- Sizes ---------- */
.gt-button--compact {
  min-height: var(--btn-height-compact);
  padding: 0.5rem 1.05rem;
  font-size: 0.875rem;
}
/* Large: the section's main invitation, in the display face (design/font-design.md: "selected buttons") */
.gt-button--large {
  min-height: var(--btn-height-large);
  padding: 0.75rem 1.75rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.005em;
}
.gt-button--block {
  width: 100%;
}

/* The narrowest phones (under 384 px): a long label wraps inside its pill in balanced lines rather than running past
   the screen ("Explore the Cape Peninsula Tour" at 320 px) */
@media (max-width: 23.99em) {
  .gt-button:not(.gt-button--tertiary) {
    max-width: 100%;
    white-space: normal;
    text-wrap: balance;
  }
}

/* ---------- States ---------- */
/* Hover lifts 2 px; pressing returns it to the plane with a slight inset, no bounce */
@media (hover: hover) {
  .gt-button:not(.gt-button--tertiary):hover:not(:disabled, [aria-disabled='true'], [aria-busy='true']) {
    transform: translateY(var(--btn-lift));
  }
}
.gt-button:not(.gt-button--tertiary):active:not(:disabled, [aria-disabled='true']) {
  transform: translateY(0);
  box-shadow: var(--btn-press);
}
/* Disabled: muted, a dashed edge and a no-entry cursor, still legible (not opacity alone) */
.gt-button:disabled,
.gt-button[aria-disabled='true'] {
  cursor: not-allowed;
  filter: saturate(0.35);
  border-style: dashed;
  box-shadow: none;
  transform: none;
  opacity: 0.72;
}
.gt-button--tertiary:disabled,
.gt-button--tertiary[aria-disabled='true'] {
  text-decoration-style: dashed;
}
/* Loading: the width holds, a quiet ring turns beside the label, and a second press does nothing */
.gt-button[aria-busy='true'] {
  cursor: progress;
  pointer-events: none;
}
.gt-button[aria-busy='true']::after {
  content: '';
  position: static;
  flex: none;
  order: -1;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  background: none;
  animation: gt-button-turn 0.8s linear infinite;
}
/* A control that brings its own spinner (the booking form's Send Enquiry) keeps just that one */
.gt-button[aria-busy='true']:has(> .spinner)::after {
  content: none;
}
@keyframes gt-button-turn {
  to {
    transform: rotate(1turn);
  }
}

/* The specimen page (/design-system/, preview builds only) shows each state at rest */
.lc-specimen .gt-button.is-hover {
  transform: translateY(var(--btn-lift));
}
.lc-specimen .gt-button--primary.is-hover {
  --btn-bg: var(--green-hover);
  box-shadow: var(--btn-edge), var(--btn-shadow-hover);
}
.lc-specimen .gt-button--secondary.is-hover {
  --btn-bg: var(--green-leaf-hover);
  --btn-border: var(--green-primary);
}
.lc-specimen .gt-button--outline.is-hover {
  --btn-bg: var(--green-soft-background);
  --btn-fg: var(--green-deep);
}
.lc-specimen .gt-button.is-pressed {
  box-shadow: var(--btn-press);
}
.lc-specimen .gt-button.is-focus {
  outline: 3px solid var(--btn-focus);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .gt-button {
    transition: none !important;
  }
  .gt-button:hover,
  .gt-button:active {
    transform: none !important;
  }
  .gt-button[aria-busy='true']::after {
    display: block;
    animation: none;
    border-right-color: currentColor;
    border-style: dotted;
  }
}

@media (forced-colors: active) {
  .gt-button {
    forced-color-adjust: auto;
    border: 1px solid ButtonText;
  }
  .gt-button:focus-visible {
    outline-color: Highlight;
  }
  .gt-button:disabled,
  .gt-button[aria-disabled='true'] {
    color: GrayText;
    border-color: GrayText;
  }
}

/* ---------- The navbar's Book Your Adventure (the owner's request of 8 Nov 2026): the standard primary pill ----------
   Phones keep the booking action in the menu and the call bar: no button in the header bar below 40em (styles.css ›
   .header-cta; this sheet loads after it, so .gt-button's display would otherwise win). From 1024 to 1279 px, where
   the navigation and the concierge share the bar, it takes the compact pill's measures, so its words never push the
   bar past its edge; over the home page's film (the transparent header) its focus ring is the on-dark one. */
@media (max-width: 39.99em) {
  .header-cta.gt-button {
    display: none;
  }
}
@media (min-width: 64em) and (max-width: 79.99em) {
  .header-cta.gt-button {
    min-height: var(--btn-height-compact);
    padding: 0.5rem 1.05rem;
    font-size: 0.875rem;
  }
}
.site-header--overlay:not(.is-condensed) .gt-button:focus-visible {
  outline-color: var(--btn-focus-on-dark);
}