/* Shared by PHP and Astro (BaseHead imports this file as a build asset).
 * Keep the theme/SCSS palette intact; assign existing navy and gold to UI roles.
 * Dimensions, spacing, typography, validation colors and brand logos stay intact.
 */
:root {
  --bw-ui-navy: #003367;
  --bw-ui-navy-hover: #002041;
  --bw-ui-gold: #f1c457;
  --bw-ui-gold-hover: #eeb834;
  --bw-ui-surface: #fff;
  --bw-ui-tint: rgba(241, 196, 87, 0.12);
}

/* Unfilled utility buttons (menu, sharing, social links). */
:where(.btn, .btn-footer-cta) {
  --bw-button-text: var(--bw-ui-navy);
  --bw-button-bg: transparent;
  --bw-button-border: transparent;
  --bw-button-hover-text: var(--bw-ui-navy-hover);
  --bw-button-hover-bg: var(--bw-ui-tint);
  --bw-button-hover-border: transparent;
}

/* Ordinary actions use navy, regardless of their legacy Bootstrap variant. */
:where(.btn-primary, .btn-secondary, .btn-success, .btn-info, .btn-warning,
  .btn-danger, .btn-dark, .btn-light, .btn-cta, .btn-footer-cta) {
  --bw-button-text: var(--bw-ui-surface);
  --bw-button-bg: var(--bw-ui-navy);
  --bw-button-border: var(--bw-ui-navy);
  --bw-button-hover-text: var(--bw-ui-surface);
  --bw-button-hover-bg: var(--bw-ui-navy-hover);
  --bw-button-hover-border: var(--bw-ui-navy-hover);
}

/* Secondary actions, including back/close, remain visually lighter. */
:where(.btn[class*="btn-outline-"], .btn[name="action"][value="back"],
  .btn[data-bs-dismiss="modal"], .btn[data-bs-dismiss="modal"]) {
  --bw-button-text: var(--bw-ui-navy);
  --bw-button-bg: var(--bw-ui-surface);
  --bw-button-border: var(--bw-ui-navy);
  --bw-button-hover-text: var(--bw-ui-surface);
  --bw-button-hover-bg: var(--bw-ui-navy);
  --bw-button-hover-border: var(--bw-ui-navy);
}

/* Reserve gold for enquiry links and the final send action, not every next step. */
:where(.btn[href^="/inquiry/"], .btn[href^="https://www.bestworkers.jp/inquiry/"],
  .btn[data-ui-action="send"], .btn[data-final-step="true"], .btn.inquiry-preview-submit) {
  --bw-button-text: var(--bw-ui-navy);
  --bw-button-bg: var(--bw-ui-gold);
  --bw-button-border: var(--bw-ui-gold);
  --bw-button-hover-text: var(--bw-ui-navy);
  --bw-button-hover-bg: var(--bw-ui-gold-hover);
  --bw-button-hover-border: var(--bw-ui-gold-hover);
}

/* Color-only overrides win over legacy state rules and text-white/bg utilities. */
body :is(.btn, .btn-footer-cta) {
  color: var(--bw-button-text) !important;
  background-color: var(--bw-button-bg) !important;
  background-image: none !important;
  border-color: var(--bw-button-border) !important;
}

body :is(.btn, .btn-footer-cta):is(:active, .active, :focus-visible):not(:disabled):not(.disabled):not([aria-disabled="true"]) {
  color: var(--bw-button-hover-text) !important;
  background-color: var(--bw-button-hover-bg) !important;
  border-color: var(--bw-button-hover-border) !important;
}

@media (hover: hover) and (pointer: fine) {
  body :is(.btn, .btn-footer-cta):hover:not(:disabled):not(.disabled):not([aria-disabled="true"]) {
    color: var(--bw-button-hover-text) !important;
    background-color: var(--bw-button-hover-bg) !important;
    border-color: var(--bw-button-hover-border) !important;
  }
}

body :is(.btn, .btn-footer-cta):focus {
  box-shadow: none;
}

body :is(.btn, .btn-footer-cta):focus-visible {
  outline: 2px solid var(--bw-ui-navy) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--bw-ui-gold) !important;
}

body :is(.btn, .btn-footer-cta):is(:disabled, .disabled, [aria-disabled="true"]) {
  opacity: 0.65;
}

/* The legacy mail CTA hard-codes a white envelope; follow the button text. */
.mailbtn svg path {
  fill: currentColor !important;
}

/* Desktop floating contact controls have independent gradient backgrounds. */
.ctab .ctabBox,
.ctab .ctabBox a {
  color: var(--bw-ui-surface);
  background: var(--bw-ui-navy) !important;
}

.ctab .ctabBox a:is(:hover, :focus-visible) {
  color: var(--bw-ui-surface);
  background: var(--bw-ui-navy-hover) !important;
}

.ctab .ctabBox a:focus-visible {
  outline: 2px solid var(--bw-ui-gold);
  outline-offset: -3px;
}

/* Current links use navy; active state is generated by the page templates. */
.navbar-nav .current_page_item > .nav-link {
  color: var(--bw-ui-navy);
}

/* Both form variants share the same progress and choice colors. */
.progress-track span,
.step-list li.current,
.bw-step.is-current {
  color: var(--bw-ui-surface);
  background: var(--bw-ui-navy);
  border-color: var(--bw-ui-navy);
}

.step-list li.done,
.bw-step.is-done {
  color: var(--bw-ui-navy);
  background: var(--bw-ui-tint);
  border-color: var(--bw-ui-navy);
}

.bw-step span {
  color: var(--bw-ui-navy);
  border-color: var(--bw-ui-navy);
}

.bw-step.is-current span {
  color: var(--bw-ui-navy);
  background: var(--bw-ui-gold);
  border-color: var(--bw-ui-gold);
}

:is(.choice, .bw-option-card):hover {
  border-color: var(--bw-ui-navy);
}

:is(.choice, .bw-option-card):has(input:checked) {
  background: var(--bw-ui-tint);
  border-color: var(--bw-ui-navy);
  box-shadow: inset 4px 0 0 var(--bw-ui-gold);
}

:is(.choice, .bw-option-card) input {
  accent-color: var(--bw-ui-navy);
}

.form-control:focus,
.form-wrap :is(input, select, textarea):focus,
.choice:focus-within {
  border-color: var(--bw-ui-navy);
  box-shadow: 0 0 0 0.2rem rgba(0, 51, 103, 0.2);
}

/* Validation is still an error, even while the field is focused. */
.has-error :is(input, select, textarea):focus,
.form-control.is-invalid:focus,
.form-control[aria-invalid="true"]:focus {
  border-color: #c20062;
}

.bw-zip-modal-close {
  color: var(--bw-ui-navy);
}

.bw-zip-modal-option:is(:hover, :focus-visible) {
  background: var(--bw-ui-tint);
}

.bw-zip-modal-option:focus-visible,
.bw-zip-modal-close:focus-visible {
  outline: 2px solid var(--bw-ui-navy);
  outline-offset: -2px;
}

.bw-zip-message.is-ok {
  color: var(--bw-ui-navy);
}