/* ==========================================================================
   Accessibility remediation layer — WCAG 2.1 Level AA
   Loaded AFTER style.css so it wins on specificity ties.
   Do not fold this into style.css: style.css is the vendor UIkit bundle and
   gets replaced wholesale on theme updates.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Palette — every value below is verified against its real background.
   #5f5f5f on #fff = 6.39:1   #595959 on #fff = 7.00:1
   #4b5758 on #fff = 7.49:1   #946200 on #fff = 5.24:1
   #2c2d30 on #FCB42D = 7.68:1  #0b5ed7 on #fff = 5.84:1
   -------------------------------------------------------------------------- */
:root {
  --a11y-text-muted: #5f5f5f;
  --a11y-text-muted-strong: #595959;
  --a11y-amber-on-light: #946200;
  --a11y-ink: #2c2d30;
  --a11y-focus: #0b5ed7;
  --a11y-focus-on-dark: #ffc94a;
}

/* ==========================================================================
   1. Keyboard focus visibility — WCAG 2.4.7 Focus Visible
   UIkit sets `outline: none` on links, buttons and form controls. Those rules
   are re-armed here for keyboard users only, so mouse clicks stay ring-free.
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
.uk-button:focus-visible,
.uk-input:focus-visible,
.uk-select:focus-visible,
.uk-textarea:focus-visible,
.uk-checkbox:focus-visible,
.uk-radio:focus-visible,
.uk-icon-button:focus-visible,
.uk-navbar-nav > li > a:focus-visible,
.uk-nav > li > a:focus-visible,
.uk-slidenav:focus-visible,
.uk-dotnav > * > *:focus-visible,
.uk-breadcrumb > * > a:focus-visible,
.uk-subnav > * > a:focus-visible {
  outline: 3px solid var(--a11y-focus) !important;
  outline-offset: 2px !important;
  border-radius: 2px;
}

/* Dark surfaces need a light ring to stay visible */
.uk-background-black :focus-visible,
.uk-light :focus-visible,
.uk-section-primary :focus-visible,
.uk-section-secondary :focus-visible,
.in-slideshow :focus-visible,
.uk-navbar-dropdown :focus-visible,
.uk-offcanvas-bar :focus-visible,
.uk-modal-full :focus-visible {
  outline-color: var(--a11y-focus-on-dark) !important;
}

/* Browsers without :focus-visible support still get a ring */
@supports not selector(:focus-visible) {
  a:focus, button:focus, input:focus, select:focus, textarea:focus, [tabindex]:focus {
    outline: 3px solid var(--a11y-focus) !important;
    outline-offset: 2px !important;
  }
}

/* ==========================================================================
   2. Skip link — WCAG 2.4.1 Bypass Blocks
   ========================================================================== */
.skip-links {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000000;
}

.skip-link {
  position: absolute;
  left: -10000px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  background: #0c0c0c;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-decoration: underline;
  padding: 14px 22px;
  border-radius: 0 0 6px 0;
  white-space: nowrap;
}

.skip-link:nth-of-type(2):focus { left: 260px; }

.skip-link:focus,
.skip-link:focus-visible {
  left: 0;
  width: auto;
  height: auto;
  overflow: visible;
  color: #fff;
  outline: 3px solid var(--a11y-focus-on-dark) !important;
  outline-offset: -3px !important;
}

/* Landing target should not be visually jarring when focused programmatically */
main:focus { outline: none; }

/* Visually hidden but available to assistive tech */
.a11y-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   3. Colour contrast — WCAG 1.4.3 Contrast (Minimum)
   ========================================================================== */

/* 3a. Footer small print and legal sub-navigation (was #999 on white) */
footer .uk-text-small { color: var(--a11y-text-muted-strong); }
footer .copyright-text,
footer .copyright-text strong { color: var(--a11y-text-muted-strong); }
footer .uk-subnav > * > :first-child { color: #4a4a4a; }
footer .uk-subnav > * > a:hover,
footer .uk-subnav > * > a:focus { color: #0c0c0c; }
footer .uk-link-text li a,
footer .uk-list li a { color: #4a4a4a; }
footer .uk-link-text li a:hover,
footer .uk-link-text li a:focus { color: #7a5200; }

/* 3b. Generic muted text utilities (were #999 / #9f9f9f on white) */
.uk-text-meta { color: var(--a11y-text-muted); }
.uk-text-lead { color: var(--a11y-text-muted); }
.uk-text-muted { color: var(--a11y-text-muted) !important; }

/* Keep the light-on-dark variants that UIkit already ships; they pass on
   dark surfaces and must not inherit the dark grey above. */
.uk-light .uk-text-meta,
.uk-light .uk-text-lead,
.uk-section-primary:not(.uk-preserve-color) .uk-text-meta,
.uk-section-primary:not(.uk-preserve-color) .uk-text-lead {
  color: rgba(255, 255, 255, 0.85);
}
.uk-light .uk-text-muted,
.uk-section-primary:not(.uk-preserve-color) .uk-text-muted {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* 3c. Brand amber is unreadable as text on white (1.79:1). Darken it for
   light surfaces; `.uk-light` scopes keep the bright brand amber on dark. */
.uk-text-primary { color: var(--a11y-amber-on-light) !important; }
.uk-text-warning { color: var(--a11y-amber-on-light) !important; }

.uk-light .uk-text-primary,
.uk-light .uk-text-warning,
.uk-background-black .uk-text-primary,
.uk-background-black .uk-text-warning,
.in-slideshow .uk-text-primary,
.in-slideshow .uk-text-warning {
  color: #FCB42D !important;
}

/* 3d. Product badges in the "Popular Trading Products" cards.
   White 9px bold text sat on pastel fills (2.4–3.9:1). Darkening the fills
   keeps the colour coding intact and lifts every badge past 4.5:1. */
.in-equity-1 .uk-card .in-product-name { color: #4b5758; }
.in-product-name.red   { background-color: #b3241c !important; color: #fff !important; }
.in-product-name.green { background-color: #136b4f !important; color: #fff !important; }
.in-product-name.blue  { background-color: #2b5aa0 !important; color: #fff !important; }

/* Card body copy sits on the amber section fill (#fdc357); #5c5c5c gave 4.17:1 */
.in-equity-1 .uk-card p,
.in-equity-1 .uk-card h3,
.uk-section-primary.uk-preserve-color .uk-card-body p { color: #2c2d30; }

/* 3g. `.uk-section-primary` is amber, so UIkit's white-on-primary text
   lands at 1.79:1. Amber needs dark ink, not white. */
.uk-section-primary:not(.uk-preserve-color),
.uk-section-primary:not(.uk-preserve-color) .uk-text-lead,
.uk-section-primary:not(.uk-preserve-color) h1,
.uk-section-primary:not(.uk-preserve-color) h2,
.uk-section-primary:not(.uk-preserve-color) h3,
.uk-section-primary:not(.uk-preserve-color) p {
  color: #2c2d30 !important;
}

/* `.in-equity-6` sits on the amber fill and forces white text (1.79:1) */
.in-equity-6 .uk-text-lead,
.in-equity-6 h1,
.in-equity-6 h2,
.in-equity-6 h3,
.in-equity-6 p:not(.a11y-form-status) { color: #2c2d30 !important; }

/* 3h. `.in-equity-3` re-declares the warning colour at higher specificity */
.in-equity-3 .uk-text-warning,
.uk-container .uk-text-warning,
.uk-h2.uk-text-warning,
.uk-h3.uk-text-warning { color: var(--a11y-amber-on-light) !important; }
.uk-light .uk-h2.uk-text-warning,
.uk-light .uk-h3.uk-text-warning,
.in-topbar .uk-text-warning { color: #FCB42D !important; }

/* 3i. `.uk-text-dark` overrode `.uk-text-meta` back to #888 in testimonials */
.uk-text-meta.uk-text-dark,
.uk-card-default .uk-text-meta { color: var(--a11y-text-muted) !important; }

/* 3j. Dark modal dialog: body copy and links were mid-grey/blue on #2e2e31 */
.uk-modal-dialog,
.uk-modal-dialog p,
.uk-modal-dialog label { color: #e6e6e6; }
.uk-modal-dialog a:not(.uk-button) { color: #8ecbff; text-decoration: underline; }
.uk-modal-dialog a:not(.uk-button):hover { color: #b9dfff; }

/* 3e. Breadcrumb: current page was near-white on the amber bar (1.79:1) */
.uk-breadcrumb > :last-child > span,
.uk-breadcrumb > :last-child > a:not([href]),
.uk-breadcrumb :last-child > span a,
.in-equity-breadcrumb .uk-breadcrumb > * > * {
  color: var(--a11y-ink);
}
.in-equity-breadcrumb .uk-breadcrumb > * > a { text-decoration: underline; }
.in-equity-breadcrumb .uk-breadcrumb > * > :hover { color: #000; }

/* 3f. Header utility bar sits on #0c0c0c but is not marked `.uk-light`,
   so its text inherited #333 (1.55:1). */
.in-topbar,
.in-topbar strong,
.in-topbar a,
.in-topbar .uk-text-light,
.in-topbar .uk-text-bold { color: #fff; }
.in-topbar .uk-text-muted { color: #b3b3b3 !important; }
.in-topbar a:hover,
.in-topbar a:focus { color: #FCB42D; }

/* 3k. Default link blue (#1e87f0) is 3.4:1 on white and 3.6:1 on the light
   grey sections — below the 4.5:1 body-text threshold. */
a,
.uk-link,
.uk-link-toggle:hover .uk-link,
.uk-link-text:hover { color: #0b5ed7; }
a:hover,
.uk-link:hover { color: #084298; }

/* Links on dark surfaces keep a light blue instead */
.uk-light a:not(.uk-button):not(.uk-icon-button),
.uk-section-secondary a:not(.uk-button),
.uk-offcanvas-bar a:not(.uk-button),
.in-topbar a:not(.uk-button) { color: #8ecbff; }

/* Tab and switcher labels were #999 on near-white */
.uk-tab > * > a,
.uk-subnav > * > :first-child { color: #5f5f5f; }
.uk-tab > .uk-active > a { color: #2c2d30; }

/* Theme link accents that beat the base rule on specificity */
.in-equity-1 .uk-card .uk-button-text,
.uk-list a,
.uk-link-muted,
a.uk-link-muted,
.uk-link-text { color: #5f5f5f; }
.uk-link-muted:hover,
.uk-link-text:hover { color: #2c2d30; }
.uk-margin-small-bottom > a[href^="#"],
.in-equity-2 a[href*="#"],
main .uk-card a:not(.uk-button) { color: #0b5ed7; }

/* Blockquote body copy (#8f8f8f on the light grey section) */
blockquote,
blockquote p,
.uk-blockquote { color: #5f5f5f; }

/* ==========================================================================
   4. Use of colour — WCAG 1.4.1
   Inline links inside paragraphs were distinguished by colour alone.
   ========================================================================== */
main p > a[href]:not(.uk-button):not([class*="uk-icon"]),
main li > a[href]:not(.uk-button):not([class*="uk-icon"]):not([class*="uk-nav"]),
.uk-text-lead > a[href]:not(.uk-button) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   5. Motion — WCAG 2.2.2 Pause, Stop, Hide
   `.a11y-motion-paused` on <html> freezes every CSS animation and transition.
   The matching JS also stops the UIkit slider autoplay and the particles
   canvas, which CSS alone cannot reach.
   ========================================================================== */
.a11y-motion-paused *,
.a11y-motion-paused *::before,
.a11y-motion-paused *::after {
  animation-play-state: paused !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* The marquee is a single long line; when paused, let it wrap so the whole
   risk disclaimer stays readable instead of being clipped mid-sentence. */
.a11y-motion-paused .marquee {
  position: static !important;
  animation: none !important;
  transform: none !important;
  white-space: normal !important;
}
.a11y-motion-paused .marquee-container {
  height: auto !important;
  overflow: visible !important;
  white-space: normal !important;
}
.a11y-motion-paused .marquee p .marquee-dup { display: none; }
.a11y-motion-paused #particles-js .particles-js-canvas-el { display: none; }

/* Motion toggle button in the header bar */
.a11y-motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid #8a8a8a;
  color: #fff;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.a11y-motion-toggle:hover,
.a11y-motion-toggle:focus { border-color: #FCB42D; color: #FCB42D; }
.a11y-motion-toggle .a11y-motion-icon { font-size: 11px; }

/* Users who ask the OS for reduced motion get it without touching the button */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .phone-float { animation: none !important; }
}

/* ==========================================================================
   6. Forms — WCAG 1.3.1 / 3.3.1 / 3.3.2
   ========================================================================== */
.a11y-form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #2c2d30;
  margin-bottom: 6px;
}
.a11y-required { color: #a4262c; font-weight: 700; }

.a11y-form-status {
  display: none;
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.5;
  margin-top: 4px;
}
.a11y-form-status.is-visible { display: block; }
.a11y-form-status.is-success {
  background: #e7f6ec;
  border-left: 4px solid #1a7f37;
  color: #10471f;
}
.a11y-form-status.is-error {
  background: #fdecea;
  border-left: 4px solid #a4262c;
  color: #71161b;
}

/* Visually-hidden file input: surface focus on its visible label instead */
input[type="file"].a11y-sr-only:focus-visible + label,
label:has(+ input[type="file"].a11y-sr-only:focus-visible),
.uk-inline:focus-within > label.uk-button {
  outline: 3px solid var(--a11y-focus) !important;
  outline-offset: 2px !important;
}

.a11y-field-error {
  display: block;
  color: #a4262c;
  font-size: 13px;
  font-weight: 600;
  margin-top: 4px;
}

/* Form icons are decorative; keep them clear of the now-labelled inputs */
.in-contact-6 .uk-form-icon { color: #5f5f5f; }

/* ==========================================================================
   7. Keyboard operability — WCAG 2.1.1
   ========================================================================== */
/* Scrollable panes must be reachable and scrollable by keyboard */
.a11y-scrollable:focus-visible {
  outline: 3px solid var(--a11y-focus) !important;
  outline-offset: 2px !important;
}

/* The navbar dropdowns open on hover; make sure the keyboard-open state
   renders identically instead of collapsing when focus moves inside. */
.uk-navbar-nav > li:focus-within > .uk-navbar-dropdown,
.uk-navbar-nav > li > .uk-navbar-dropdown:focus-within {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Hover-reveal slider arrows must appear on keyboard focus too */
.uk-hidden-hover:focus,
.uk-hidden-hover:focus-visible,
.uk-visible-toggle:focus-within .uk-hidden-hover {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Floating action buttons: give them a real hit target and focus ring */
.whatsapp-float a:focus-visible img,
.phone-float:focus-visible { outline: 3px solid var(--a11y-focus) !important; outline-offset: 3px !important; }

/* `to-top` is a control, not decorative text */
.to-top:focus-visible { opacity: 1 !important; }