/* ------------------------------------------------------------------
   Luxury Marine Advisors - design tokens & helper classes
   Loaded BEFORE Blocksy's customizer CSS and Elementor's page CSS, and
   deliberately written without !important, so anything you change in the
   Blocksy Customizer or in Elementor always wins over this file.
   ------------------------------------------------------------------ */

:root {
  --lma-navy-900: #071f3d;
  --lma-navy-800: #0b2d5a;
  --lma-navy-700: #143a6b;
  --lma-gold-600: #a9843f;
  --lma-gold-500: #bc9c63;
  --lma-gold-400: #cbb182;
  --lma-gold-200: #e7dcc4;
  --lma-ivory-50: #f7f5ef;
  --lma-ivory-100: #f1eee5;
  --lma-ivory-200: #e6e1d4;
  --lma-ink-900: #1a2230;
  --lma-ink-700: #3f4653;
  --lma-ink-500: #6b7280;
  --lma-on-dark: #f3f1ea;
  --lma-on-dark-muted: rgba(243, 241, 234, 0.66);
  --lma-divider-dark: rgba(243, 241, 234, 0.14);
  --lma-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --lma-dur-fast: 220ms;
  --lma-dur-base: 420ms;
  --lma-dur-slow: 720ms;
}

/* Anchor links in the menu glide instead of jumping */
html { scroll-behavior: smooth; }

/* Selection uses the brand tint */
::selection { background: var(--lma-gold-200); color: var(--lma-navy-900); }

/* ---- Service card gold rule that extends on hover: class "lma-card" -- */
.lma-card { position: relative; overflow: hidden; }
.lma-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 52px;
  background: var(--lma-gold-500);
  transition: width var(--lma-dur-slow) var(--lma-ease-out);
  z-index: 2;
}
.lma-card:hover::before { width: 100%; }

/* ---- Arrow link: class "lma-arrowlink" on a text-style Button -------- */
.lma-arrowlink .elementor-button-text::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -0.1em;
  margin-left: 0.85em;
  width: 30px;
  height: 1px;
  background: var(--lma-gold-500);
  transition: width var(--lma-dur-base) var(--lma-ease-out);
}
.lma-arrowlink:hover .elementor-button-text::after { width: 46px; }

/* ---- Decorative watermark word --------------------------------------- */
.lma-watermark { pointer-events: none; user-select: none; }
.lma-watermark .elementor-heading-title { white-space: nowrap; }

/* ---- Hairlines flanking the hero CTA --------------------------------- */
.lma-hair-l, .lma-hair-r { pointer-events: none; }
.lma-hair-l { background: linear-gradient(to right, transparent, rgba(243, 241, 234, 0.28)); }
.lma-hair-r { background: linear-gradient(to left,  transparent, rgba(243, 241, 234, 0.28)); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lma-card::before,
  .lma-arrowlink .elementor-button-text::after { transition: none; }
}