/* Yamoo Group blues supplied by the owner, 2026-11-15.
   Colour-only layer shared by catalogue, details, Explore and booking/tracking. */
:root {
  --brand-blue: #0052CC;
  --brand-deep: #002B7F;
  --brand-bright: #0080FF;
  --brand-gold: #8d723e;
  --brand-gold-label: #806528;
  --brand-gold-light: #d4c18d;
  --brand-warm: #f8f7f3;
  --brand-surface: #fff;
  --brand-text: #122c46;
  --brand-hover: #edf4ff;
  --brand-gradient: linear-gradient(to right, var(--brand-deep) 0%, var(--brand-blue) 50%, var(--brand-bright) 100%);
}
body { background: var(--brand-warm); color: var(--brand-text); }
main h1, main h2, main h3, main h2 a, .live-price { color: var(--brand-deep); }
.hero h1 em, .page-intro em, .journey .number { color: var(--brand-gold); }
.eyebrow { color: var(--brand-gold-label); }
.service-bar, .footer { background: var(--brand-deep); }
.footer-column h2, .footer-location { color: var(--brand-gold-light); }
main a, .hero-links a { color: var(--brand-blue); }
main a:hover, .hero-links a:hover { color: var(--brand-deep); }

/* At 200% width and left position only deep → main is behind the label.
   Bright blue remains an exact gradient token, never the small-label backdrop. */
.primary, .live-button.primary {
  color: var(--brand-surface);
  border-color: var(--brand-blue);
  background-color: var(--brand-blue);
  background-image: var(--brand-gradient);
  background-size: 200% auto;
  background-position: left center;
}
.primary:hover, .live-button.primary:hover {
  color: var(--brand-surface);
  background-color: var(--brand-blue);
  background-image: none;
}
.primary:active, .live-button.primary:active {
  background-color: var(--brand-deep);
  background-image: none;
}

.secondary, .live-button:not(.primary), .live-actions button,
.live-comparison button, .live-empty button, .lang, .menu-toggle, .filter {
  color: var(--brand-blue);
  border-color: var(--brand-blue);
  background: var(--brand-surface);
}
.journey button, .journey-shortcuts button { color: var(--brand-blue); border-color: var(--brand-blue); }
.secondary:hover, .live-button:not(.primary):hover, .live-actions button:hover,
.live-comparison button:hover, .live-empty button:hover, .lang:hover,
.menu-toggle:hover, .filter:hover, .journey button:hover, .journey-shortcuts button:hover {
  color: var(--brand-blue);
  background: var(--brand-hover);
}
.live-actions button[aria-pressed=true],
.filter.active, .menu-toggle[aria-expanded=true] {
  color: var(--brand-surface);
  background: var(--brand-blue);
  border-color: var(--brand-blue);
}
.live-actions button[aria-pressed=true]:hover,
.filter.active:hover, .menu-toggle[aria-expanded=true]:hover {
  color: var(--brand-surface);
  background: var(--brand-deep);
  border-color: var(--brand-deep);
}
.steps .active { color: var(--brand-blue); }
.steps .active b { background: var(--brand-blue); border-color: var(--brand-blue); color: var(--brand-surface); }
input, select, textarea { accent-color: var(--brand-blue); }
.check input { accent-color: var(--brand-blue); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--brand-blue);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px var(--brand-surface);
}
.footer a:focus-visible { outline-color: var(--brand-gold-light); }
button:disabled { opacity: 1; cursor: wait; }
.primary:disabled, .primary:disabled:hover {
  background: var(--brand-blue); color: var(--brand-surface);
}
/* Warning notices, errors and confirmed-success statuses keep their semantic colours. */
.live-comparison .comparison-request { background-image: none; }

/* Ordinary header links only: current-page semantics never latch a visual state.
   The booking CTA, language control and logo retain their shared styles. */
.site-header [data-customer-nav] a:not(.primary) {
  position: relative;
  color: var(--brand-deep);
  background: transparent;
  text-decoration: none;
}
.site-header [data-customer-nav] a:not(.primary)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 1px;
  background: var(--brand-gold);
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .site-header [data-customer-nav] a:not(.primary):hover { color: var(--brand-blue); }
  .site-header [data-customer-nav] a:not(.primary):hover::after { transform: scaleX(1); }
}
.site-header [data-customer-nav] a:not(.primary):focus-visible { color: var(--brand-blue); }
.site-header [data-customer-nav] a:not(.primary):focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .site-header [data-customer-nav] a:not(.primary)::after { transition: none; }
}