/* VOK Trading Limited — styles that cannot live in the inline style attributes
   carried over from the design file: resets, hover and focus states, and the
   enquiry form's status and honeypot rules. */

body {
  margin: 0;
  background: #F2F1EC;
  color: #1C2321;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

a {
  color: #41576B;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { color: #1C2321; }

:focus-visible { outline: 2px solid #41576B; outline-offset: 2px; }

table { border-collapse: collapse; }

img { max-width: 100%; }

/* Anchors sit under the sticky header without JavaScript. */
[id] { scroll-margin-top: 78px; }

/* --- states carried over from the design's style-hover / style-focus ------ */

.navlink:hover { color: #7D8471; }

.btn { transition: background-color 120ms linear, color 120ms linear; }
.btn:hover { background: #F2F1EC !important; color: #1C2321 !important; }

.fld:focus { border-color: #41576B !important; }

.btn[disabled] { opacity: 0.55; cursor: default; }
.btn[disabled]:hover { background: #1C2321 !important; color: #F2F1EC !important; }

/* --- enquiry form -------------------------------------------------------- */

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

[data-form-status][data-state="ok"]    { color: #7D8471; }
[data-form-status][data-state="error"] { color: #8C3A2B; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}