/* Build 438 — canonical public actions + landing-divider system.
   Presentation only. This is deliberately a late cascade layer so the public
   site can converge on one action language without deleting legacy CSS yet.
   Filters/tabs keep their functional state attributes; a later dedicated pass
   can consolidate those modules further. */

:root {
  --jt-action-gold: #d2a23a;
  --jt-action-gold-light: #e7bf61;
  --jt-action-gold-bright: #f3cf78;
  --jt-action-ink: #080704;
  --jt-action-light-ink: #674a11;
  --jt-action-light-border: #8b681f;
  --jt-action-focus: rgba(242,196,100,.42);
  --jt-divider-bg: #e9e0d3;
  --jt-divider-ink: #17130e;
  --jt-divider-muted: #625b52;
  --jt-divider-gold: #8b681f;
  --jt-divider-line: rgba(76,60,38,.18);
}

/* -------------------------------------------------------------------------
   1. PUBLIC BUTTON / CTA CONTRACT
   Primary   = filled gold pill
   Secondary = gold outline pill
   Quiet     = lower-emphasis outline
   Text      = .text-link
   ------------------------------------------------------------------------- */
html body .btn {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 50px !important;
  padding: 11px 26px !important;
  border: 1px solid var(--jt-action-gold) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--jt-action-gold-light) !important;
  box-shadow: none !important;
  font-family: Lato, Arial, sans-serif !important;
  font-size: clamp(.78rem,.78vw,.88rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: .105em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: normal !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease !important;
}

html body .btn.btn-primary {
  border-color: #d3a437 !important;
  background: linear-gradient(135deg,#a86f18 0%,#efc45f 100%) !important;
  color: var(--jt-action-ink) !important;
  box-shadow: 0 12px 28px rgba(164,112,26,.18) !important;
}

html body .btn.btn-quiet {
  border-color: rgba(210,162,58,.46) !important;
  background: rgba(210,162,58,.025) !important;
  color: #cdbb8b !important;
  box-shadow: none !important;
}

html body .btn.btn-small {
  min-height: 42px !important;
  padding: 9px 18px !important;
  font-size: .74rem !important;
  letter-spacing: .09em !important;
}

/* Functional selected states for existing button-backed browse/filter controls. */
html body .btn.is-active:not(.btn-primary),
html body .btn[aria-pressed="true"]:not(.btn-primary),
html body .btn[aria-current="true"]:not(.btn-primary) {
  border-color: var(--jt-action-gold) !important;
  background: rgba(210,162,58,.14) !important;
  color: var(--jt-action-gold-bright) !important;
}

html body .btn:disabled,
html body .btn[disabled],
html body .btn[aria-disabled="true"] {
  opacity: .48 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

html body .btn:focus-visible,
html body .text-link:focus-visible {
  outline: 3px solid var(--jt-action-focus) !important;
  outline-offset: 3px !important;
}

@media (hover:hover) and (pointer:fine) {
  html body .btn:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover {
    transform: translateY(-2px) !important;
    border-color: #e3b84f !important;
    background: rgba(210,162,58,.10) !important;
    color: #f2cf7a !important;
  }
  html body .btn.btn-primary:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover {
    border-color: #e0b44c !important;
    background: linear-gradient(135deg,#bb7f1c 0%,#f4cf75 100%) !important;
    color: #080704 !important;
    box-shadow: 0 14px 32px rgba(164,112,26,.24) !important;
  }
  html body .btn.btn-quiet:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover {
    border-color: rgba(210,162,58,.72) !important;
    background: rgba(210,162,58,.07) !important;
    color: #e6cc8d !important;
  }
}

/* Light public surfaces need the same secondary hierarchy but with darker ink. */
html body .preview-v2-light .btn:not(.btn-primary),
html body .preview-light-section .btn:not(.btn-primary),
html body .legal-section .btn:not(.btn-primary),
html body .jt-landing-divider .btn:not(.btn-primary) {
  border-color: var(--jt-action-light-border) !important;
  background: transparent !important;
  color: var(--jt-action-light-ink) !important;
}
html body .preview-v2-light .btn.btn-quiet,
html body .preview-light-section .btn.btn-quiet,
html body .legal-section .btn.btn-quiet {
  border-color: rgba(103,74,17,.46) !important;
  background: rgba(139,104,31,.025) !important;
  color: #786d54 !important;
}

html body .preview-v2-light .btn.is-active:not(.btn-primary),
html body .preview-v2-light .btn[aria-pressed="true"]:not(.btn-primary),
html body .preview-v2-light .btn[aria-current="true"]:not(.btn-primary),
html body .legal-section .btn.is-active:not(.btn-primary) {
  border-color: #80601e !important;
  background: rgba(139,104,31,.10) !important;
  color: #4f390d !important;
}
@media (hover:hover) and (pointer:fine) {
  html body .preview-v2-light .btn:not(.btn-primary):hover,
  html body .preview-light-section .btn:not(.btn-primary):hover,
  html body .legal-section .btn:not(.btn-primary):hover,
  html body .jt-landing-divider .btn:not(.btn-primary):hover {
    border-color: #725210 !important;
    background: rgba(139,104,31,.08) !important;
    color: #4e370b !important;
  }
}

/* Existing hero buttons already use these exact dimensions/colours. Keep this
   explicit parity so the hero-specific layer and the global action layer agree. */
html body #main-content > .jt-standard-hero .btn {
  min-height: 50px !important;
  padding: 11px 26px !important;
  border-radius: 999px !important;
}

/* Tertiary action language. Existing page-specific spacing is preserved. */
html body .text-link {
  color: var(--jt-action-gold-light) !important;
  font-weight: 800 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 4px !important;
  transition: color .18s ease, text-decoration-color .18s ease !important;
}
html body .preview-v2-light .text-link,
html body .preview-light-section .text-link,
html body .legal-section .text-link {
  color: #765719 !important;
}
@media (hover:hover) and (pointer:fine) {
  html body .text-link:hover { color: #fff0bc !important; }
  html body .preview-v2-light .text-link:hover,
  html body .preview-light-section .text-link:hover,
  html body .legal-section .text-link:hover { color: #3f2a0a !important; }
}

/* Action groups: consistent spacing while allowing each page to decide where
   the group sits. */
html body .hero-actions,
html body .resource-cta-actions,
html body .cta-actions {
  gap: 12px !important;
}

/* Do not turn all functional/filter buttons into full-width mobile bars. Only
   primary action groups stack to easy touch targets on narrow phones. */
@media (max-width:640px) {
  html body .btn {
    min-height: 48px !important;
    padding: 10px 21px !important;
    font-size: .78rem !important;
  }
  html body .btn.btn-small {
    min-height: 42px !important;
    padding: 9px 17px !important;
    font-size: .72rem !important;
  }
  html body .hero-actions,
  html body .resource-cta-actions,
  html body .cta-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 10px !important;
  }
  html body .hero-actions > .btn,
  html body .resource-cta-actions > .btn,
  html body .cta-actions > .btn,
  html body .booking-submit-row > .btn,
  html body .contact-form-footer .btn[type="submit"] {
    width: 100% !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  html body .btn { transition: none !important; }
  html body .btn:hover { transform: none !important; }
}

/* -------------------------------------------------------------------------
   2. CANONICAL LANDING DIVIDER CONTRACT
   Approved Occasions / Recommended Suppliers visual language.
   Desktop = 4 across. Tablet/phone = 2 x 2. No cards, no shadow, no radius.
   ------------------------------------------------------------------------- */
html body .jt-landing-divider {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: hidden !important;
  border-top: 1px solid rgba(76,60,38,.20) !important;
  border-right: 0 !important;
  border-bottom: 1px solid rgba(76,60,38,.20) !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  background: var(--jt-divider-bg) !important;
  color: var(--jt-divider-ink) !important;
  box-shadow: none !important;
}

html body .jt-landing-divider .jt-landing-divider-grid {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  gap: 0 !important;
  align-items: stretch !important;
}

html body .jt-landing-divider .jt-landing-divider-item {
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: 100px !important;
  margin: 0 !important;
  padding: 16px clamp(20px,2.5vw,44px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 0 !important;
  border: 0 !important;
  border-right: 1px solid var(--jt-divider-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--jt-divider-ink) !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transform: none !important;
}
html body .jt-landing-divider .jt-landing-divider-item:last-child { border-right: 0 !important; }

html body .jt-landing-divider .jt-landing-divider-item > span:first-child {
  display: block !important;
  margin: 0 0 5px !important;
  padding: 0 !important;
  color: var(--jt-divider-gold) !important;
  font-family: Lato,Arial,sans-serif !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
}
html body .jt-landing-divider .jt-landing-divider-item > strong {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--jt-divider-ink) !important;
  font-family: Marcellus,Georgia,serif !important;
  font-size: clamp(1.02rem,1.15vw,1.24rem) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
html body .jt-landing-divider .jt-landing-divider-item > small {
  display: block !important;
  margin: 5px 0 0 !important;
  padding: 0 !important;
  color: var(--jt-divider-muted) !important;
  font-family: Lato,Arial,sans-serif !important;
  font-size: .78rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

@media (hover:hover) and (pointer:fine) {
  html body .jt-landing-divider a.jt-landing-divider-item:hover {
    background: rgba(139,104,31,.07) !important;
  }
}
html body .jt-landing-divider a.jt-landing-divider-item:focus-visible {
  position: relative !important;
  z-index: 1 !important;
  outline: 3px solid rgba(139,104,31,.35) !important;
  outline-offset: -3px !important;
  background: rgba(139,104,31,.07) !important;
}

@media (max-width:1000px) {
  html body .jt-landing-divider .jt-landing-divider-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
  html body .jt-landing-divider .jt-landing-divider-item:nth-child(2n) { border-right: 0 !important; }
  html body .jt-landing-divider .jt-landing-divider-item:nth-child(-n+2) { border-bottom: 1px solid var(--jt-divider-line) !important; }
}
@media (max-width:640px) {
  html body .jt-landing-divider .jt-landing-divider-item {
    min-height: 90px !important;
    padding: 14px 18px !important;
  }
}

/* Recommended Suppliers used the approved divider design before the shared
   class existed. Build 438 adds the shared classes in markup; these aliases
   keep the intent explicit while old supplier CSS is still present. */
html body.resource-page-suppliers .supplier-proof-strip.jt-landing-divider,
html body.resource-page-suppliers .supplier-proof-grid.jt-landing-divider-grid,
html body.resource-page-suppliers .supplier-proof-item.jt-landing-divider-item {
  box-sizing: border-box !important;
}

@media (forced-colors:active) {
  html body .btn { border: 1px solid ButtonText !important; }
  html body .btn:focus-visible { outline: 2px solid Highlight !important; }
  html body .jt-landing-divider .jt-landing-divider-item { border-color: CanvasText !important; }
}