// =============================================================================
// BUTTONS — Custom button variants beyond Bootstrap defaults
// .btn (bare)             : default — filled gold / white text
// .btn-ghost               : opt-in — transparent fill, invisible border, dark
//                             text (the old bare-.btn look, before it defaulted
//                             to gold; kept for cases that need it)
// .btn-gold                : filled gold (nav BOOK NOW) — now redundant with
//                             bare .btn, kept as an explicit/self-documenting
//                             alias for existing markup and to avoid
//                             unnecessary template churn
// .btn-outline-gold        : transparent + gold border (most CTAs) — hover
//                             fills gold, border removed
// .btn-outline-gold-white  : gold border + white text (dark-banner CTA) —
//                             hover fills gold, border removed
// =============================================================================

// Shared base resets — Bootstrap .btn already handles padding, border, etc.
// We only define colours and dimension overrides here.

.btn {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  letter-spacing: 0.04em;
  height: 48px;
  padding: 10px 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  // 8px icon<->label gap for any button rendered via the shared
  // CtaButtonLink partial (icon span + .cta-button__label span as direct
  // children of this element — see _buttons.scss's .cta-button__icon below).
  // Harmless on every other .btn, which renders a single text node with
  // nothing to gap between. Lives here rather than on .cta-button so every
  // consumer of the partial gets it — .cta-button was previously the only
  // class carrying this, but hero__book (page-header's CTA) uses the same
  // partial without that class and was rendering icon and label touching.
  gap: var(--space-2); // 8px
  white-space: nowrap; // prevent text wrapping inside any button
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;

  // Default fill — same recipe as .btn-gold below. Matches Figma exactly:
  // white text on --color-gold is only 2.04:1, failing WCAG AA's 4.5:1
  // minimum — known design debt, flagged back to design/QA rather than
  // deviating from the spec in code.
  //
  // !important is required here for the same reason every variant below
  // needs it: Bootstrap's own .btn (imported later, in main.scss) sets these
  // properties without !important, so without it Bootstrap's transparent/
  // dark defaults would win the cascade.
  //
  // Hover: solid buttons invert to outline (transparent fill + gold border +
  // gold text) rather than just darkening — every solid variant in this file
  // follows the same solid<->outline swap on hover, mirroring how every
  // outline variant swaps the other way (see .btn-outline-gold etc. below).
  --bs-btn-bg: var(--color-gold);
  --bs-btn-border-color: var(--color-gold);
  --bs-btn-color: var(--color-white);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: var(--color-gold);
  --bs-btn-hover-color: var(--color-gold);
  background-color: var(--color-gold) !important;
  color: var(--color-white) !important;
  border: 1px solid var(--color-gold) !important;
  border-radius: var(--radius-sm) !important; // 4px — override Bootstrap's 6px default

  &:hover,
  &:focus {
    background-color: transparent !important;
    border-color: var(--color-gold) !important;
    color: var(--color-gold) !important;
  }

  &:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
  }
}

// -------------------------------------------------------------------
// Ghost — transparent fill, invisible border, dark text. Restores the
// pre-default .btn look (what a bare .btn rendered as before it defaulted
// to gold above — Bootstrap's own inherited transparent/dark styling), as
// an explicit opt-in for cases where the gold default fill isn't wanted.
// Use as class="btn btn-ghost". Positioned right after the base .btn block
// so its equal-specificity !important declarations win that cascade tie
// (source order decides between two !important rules of equal specificity).
// Exempt from the solid<->outline hover swap the other variants use below:
// it has no visible border at rest, so there's no "outline" state for it to
// invert into — its hover intentionally stays a no-op, matching what a bare
// .btn actually did before it defaulted to gold.
// -------------------------------------------------------------------
.btn-ghost {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-color: var(--color-text-primary);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-hover-color: var(--color-text-primary);
  background-color: transparent !important;
  color: var(--color-text-primary) !important;
  border: 1px solid transparent !important;

  &:hover,
  &:focus {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--color-text-primary) !important;
  }
}

// Rendered as an SVG file via CSS mask (not <img>, not inline <svg>) so it
// still recolours per .btn-* variant text colour through currentColor —
// an <img> would bake a fixed colour into the file and break on the
// white-text variants (btn-gold, btn-brand, btn-brand-elevated,
// btn-outline-gold-white).
.cta-button__icon {
  flex-shrink: 0;
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

// -------------------------------------------------------------------
// Gold filled — nav "BOOK NOW"
// !important overrides Bootstrap's .btn cascade which loads last
// -------------------------------------------------------------------
.btn-gold {
  // Matches Figma exactly: white text on --color-gold. This is only
  // 2.04:1, failing WCAG AA's 4.5:1 minimum — known design debt, flagged
  // back to design/QA rather than deviating from the spec in code.
  //
  // Hover: solid -> outline, same as the base .btn above (this variant
  // duplicates it verbatim — see the file header for why).
  --bs-btn-bg: var(--color-gold);
  --bs-btn-border-color: var(--color-gold);
  --bs-btn-color: var(--color-white);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: var(--color-gold);
  --bs-btn-hover-color: var(--color-gold);
  background-color: var(--color-gold) !important;
  color: var(--color-white) !important;
  border: 1px solid var(--color-gold) !important;
  border-radius: var(--radius-sm) !important; // 4px — override Bootstrap's 6px default

  &:hover,
  &:focus {
    background-color: transparent !important;
    border-color: var(--color-gold) !important;
    color: var(--color-gold) !important;
  }
}

// -------------------------------------------------------------------
// Outline gold — most section CTAs (light bg contexts)
// !important overrides Bootstrap's .btn cascade which loads last
// Hover: outline -> solid gold fill, border removed rather than just
// recoloured to match — border-color is set explicitly (not left to the
// base .btn:hover rule's own gold border-color, even though that happens to
// resolve to the same colour here) so the border is genuinely gone rather
// than merely invisible-by-coincidence.
// -------------------------------------------------------------------
.btn-outline-gold {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--color-gold);
  --bs-btn-color: var(--color-text-secondary);
  --bs-btn-hover-bg: var(--color-gold);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-hover-color: var(--color-white);
  background-color: transparent !important;
  color: var(--color-text-secondary) !important;
  border: 1px solid var(--color-gold) !important;

  &:hover,
  &:focus {
    background-color: var(--color-gold) !important;
    border-color: transparent !important;
    color: var(--color-white) !important;
  }
}

// -------------------------------------------------------------------
// White filled — showcase-tabs DISCOVER CTA on imagery
// Figma 18341:793: white bg, white border, dark text, radius 0
// Hover: solid -> outline (white border/text on the imagery this variant is
// meant for, so it stays visible with the fill removed). border-color is set
// explicitly here — leaving it unset lets the base .btn:hover rule's own
// !important border-color leak through (equal specificity to any other
// single-class-plus-:hover selector, and it's the only rule that actually
// sets the property if this one doesn't).
// -------------------------------------------------------------------
.btn-white {
  background-color: var(--color-white) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-white) !important;
  border-radius: 0 !important;

  &:hover,
  &:focus {
    background-color: transparent !important;
    border-color: var(--color-white) !important;
    color: var(--color-white) !important;
  }
}

// -------------------------------------------------------------------
// Brand filled — drawer TO BOOK / SEND (Figma: #b8923b fill, white text)
// -------------------------------------------------------------------
.btn-brand {
  // Matches Figma exactly: white text on --color-brand. This is only
  // 2.91:1, failing WCAG AA's 4.5:1 minimum — known design debt, flagged
  // back to design/QA rather than deviating from the spec in code.
  //
  // Hover: solid -> outline, same swap as every other solid variant here.
  background-color: var(--color-brand) !important;
  color: var(--color-white) !important;
  border: 1px solid var(--color-brand) !important;
  border-radius: 0 !important;

  &:hover,
  &:focus {
    background-color: transparent !important;
    border-color: var(--color-brand) !important;
    color: var(--color-brand) !important;
  }
}

// -------------------------------------------------------------------
// Brand outline — drawer PHOTO GALLERY (Figma: #b8923b border, dark text)
// Hover: outline -> solid, text switches to white to stay legible on the
// filled brand background (previously stayed dark-on-brand here, the one
// outline variant that didn't already match the other two's hover text).
// border-color is set explicitly in the hover block — see .btn-white above
// for why leaving it unset would leak the base .btn:hover's gold border —
// and set to transparent (border removed) rather than matching the fill,
// same as the other outline variants above/below.
// -------------------------------------------------------------------
.btn-outline-brand {
  background-color: transparent !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-brand) !important;
  border-radius: 0 !important;

  &:hover,
  &:focus {
    background-color: var(--color-brand) !important;
    border-color: transparent !important;
    color: var(--color-white) !important;
  }
}

// -------------------------------------------------------------------
// Brand filled, elevated — Figma "Buttons/Button" instance 18546:29170
// ("Button CTA"): brand fill + 2px translucent white border + skeuomorphic
// shadow (drop-shadow-xs, inset highlight, inset border-glow). Distinct
// from .btn-brand — glossier/raised, for CTAs that need more emphasis.
// -------------------------------------------------------------------
.btn-brand-elevated {
  // Same Figma white-on-brand contrast issue as .btn-brand — see there.
  background-color: var(--color-brand) !important;
  color: var(--color-white) !important;
  border: 2px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow:
    0 1px 2px 0 rgba(10, 13, 18, 0.05),
    inset 0 -2px 0 0 rgba(10, 13, 18, 0.05),
    inset 0 0 0 1px rgba(10, 13, 18, 0.18);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;

  // Hover: solid -> outline, same swap as every other solid variant here —
  // the skeuomorphic shadow/translucent border are dropped along with the
  // fill, since they're a "raised surface" cue that doesn't apply once
  // there's no surface.
  &:hover,
  &:focus {
    background-color: transparent !important;
    border: 1px solid var(--color-brand) !important;
    color: var(--color-brand) !important;
    box-shadow: none !important;
  }
}

// -------------------------------------------------------------------
// Outline gold / white text — dark-banner CTA on dark bg
// !important used to override Bootstrap's .btn cascade which loads last
// Hover: outline -> solid gold fill, border removed (see .btn-outline-gold
// above for why border-color is set explicitly rather than left to leak).
// -------------------------------------------------------------------
.btn-outline-gold-white {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--color-gold);
  --bs-btn-color: var(--color-white);
  --bs-btn-hover-bg: var(--color-gold);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-hover-color: var(--color-white);
  background-color: transparent !important;
  color: var(--color-white) !important;
  border: 1px solid var(--color-gold) !important;

  &:hover,
  &:focus {
    background-color: var(--color-gold) !important;
    border-color: transparent !important;
    color: var(--color-white) !important;
  }
}