/* ============================================================
   WordPress adjustments.

   style.css is kept byte-identical to the static build so it stays a usable
   diff target against docs/reference/css/style.css. Every deviation the
   WordPress rendering needs lives here instead, which makes the delta between
   "the design" and "the build" one short, reviewable file.
   ============================================================ */

/* --- language switcher ---
   The design used <button> elements swapped by JavaScript. Under Polylang each
   language is a real URL, so these are anchors, and anchors carry an underline
   the buttons never had. */
.lang-btn {
  text-decoration: none;
  display: inline-block;
}

/* --- current navigation item ---
   The static build set an .active class that no rule ever consumed, so the
   current page was never indicated. */
.site-nav a.active {
  color: var(--gold-soft);
}

/* --- brand badge without a landing page ---
   A brand whose page is not yet assigned renders as a <div>, not an <a>. Keep
   it visually identical but drop the affordance that implies it is clickable. */
div.badge-item {
  cursor: default;
}
div.badge-item:hover .badge {
  transform: none;
  box-shadow: none;
}

/* --- product grid tabs ---
   The static build re-rendered the grid on every tab click. Here all grids are
   in the HTML and the inactive ones are hidden, so the page still shows every
   product when scripting is unavailable. */
.bp-grid.is-hidden {
  display: none;
}

/* --- enquiry form ---
   The static build shipped hand-written markup styled by .form in style.css.
   Fluent Forms brings its own element structure, so the design's rules are
   re-pointed at the plugin's classes here. Nothing about the visual result
   changes; only the selectors it hangs off do. */

/* Two columns, matching .grid-2 in the design. Fields opted in by the
   gdu-half container class set on the form definition. */
.form .frm-fluent-form fieldset {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.form .ff-el-group {
  grid-column: 1 / -1;
  margin-bottom: 14px;
  min-width: 0;
}

.form .ff-el-group.gdu-half {
  grid-column: auto;
}

/* Labels: .form label from the design. */
.form .ff-el-input--label label {
  display: block;
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

.form .ff-el-is-required > label::after,
.form .ff-el-input--label.asterisk-right label::after {
  color: var(--gold-soft);
}

/* Controls: .form input / select / textarea from the design. */
.form .ff-el-form-control {
  width: 100%;
  margin-top: 8px;
  font: 16.5px/1.4 var(--font);
  color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 11px 13px;
  background: var(--panel-2);
  transition: border-color 0.25s;
  box-shadow: none;
}

.form .ff-el-form-control:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: none;
}

.form textarea.ff-el-form-control {
  resize: none;
}

/* The browser paints its own dropdown chrome light; keep it on the panel. */
.form select.ff-el-form-control {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

/* Consent checkbox: a sentence, not a form control. */
.form .gdu-consent .ff-el-input--label {
  display: none;
}

.form .ff-el-form-check-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.form .ff-el-form-check-checkbox label {
  font: 400 13.5px/1.5 var(--font);
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  margin: 0;
}

.form .ff-el-form-check-input {
  width: auto;
  margin: 3px 0 0;
  accent-color: var(--gold);
  flex: 0 0 auto;
}

/* Submit: .btn .btn-gold .btn-lg from the design. */
.form .ff-btn-submit {
  display: block;
  width: 100%;
  text-align: center;
  cursor: pointer;
  font: 700 17px/1 var(--font);
  border-radius: 999px;
  padding: 18px 32px;
  border: 1.5px solid transparent;
  background: linear-gradient(120deg, var(--gold), var(--gold-soft));
  color: #17130a;
  transition: filter 0.3s, transform 0.2s;
  margin-top: 6px;
}

.form .ff-btn-submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

/* Validation and confirmation messaging. */
.form .error,
.form .text-danger,
.form .ff-el-is-error .ff-el-form-control {
  border-color: #d43a3a;
}

.form .error-text,
.form .text-danger {
  color: #e05555;
  font: 400 13px/1.5 var(--font);
  margin-top: 6px;
}

.form .ff-message-success {
  color: var(--gold-soft);
  font: 400 16px/1.6 var(--font);
}

@media (max-width: 560px) {
  .form .frm-fluent-form fieldset {
    grid-template-columns: 1fr;
  }
}

/* --- skip link ---
   Keyboard users need a way past the fixed header. Visually hidden until it
   takes focus, which is the standard WordPress pattern. */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.skip-link:focus {
  clip-path: none;
  height: auto;
  width: auto;
  margin: 0;
  z-index: 100000;
  top: 12px;
  left: 12px;
  padding: 12px 22px;
  background: var(--panel);
  border: 1.5px solid var(--gold);
  border-radius: 10px;
  color: var(--ink);
  font: 600 15px/1 var(--font);
  text-decoration: none;
}

/* --- focus visibility ---
   The design defined no focus style at all, which leaves keyboard users with
   whatever the browser default is on a dark background: often invisible. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 3px;
}

/* --- admin bar ---
   The fixed header sits under the admin bar for logged-in users otherwise. */
.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}