/* ==========================================================================
   BoreDM — Ashby job board custom CSS (single file)
   1. Inter typeface
   2. Brand tokens + styling to match boredm.com

   Written against Ashby's CSS validator: only element selectors,
   .ashby-* classes, :root / :hover / :focus, and [type] / [aria-*]
   attribute selectors are used.
   ========================================================================== */

/* Load Inter from Google Fonts (must stay at the very top of the file).
   800 is included for the job-title H1. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* --------------------------------------------------------------------------
   1. Typeface
   -------------------------------------------------------------------------- */

/* Apply Inter everywhere, including form controls,
   which don't inherit fonts from the page by default */
html,
body,
*,
*::before,
*::after,
button,
input,
select,
textarea,
optgroup {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

/* Smoother rendering and Inter's cleaner alternate glyphs */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';
}

/* Default heading tracking; the job title and section titles tighten further below */
h1,
h2,
h3 {
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   2. Brand tokens — mirror boredm.com :root
   -------------------------------------------------------------------------- */
:root {
  --bdm-primary: #000000DE;   /* rgba(0,0,0,.87) — headings, buttons, borders */
  --bdm-text:    #5E5E5E;     /* body copy */
  --bdm-border:  #d1d1d1;     /* hairlines */
  --bdm-hover:   #333333;     /* primary button hover */
  --bdm-light:   #f8f8f8;     /* subtle panels */
  --bdm-outlined-hover: #f3f2f2;
}

/* ---- Text colors: swap Ashby's blue-gray for BoreDM's neutral black/gray ---- */
body,
.ashby-job-posting-right-pane,
.ashby-application-form-question-description,
.ashby-application-form-section-header-description,
.ashby-application-form-autofill-input-description {
  color: var(--bdm-text);
}

h1,
h2,
h3,
h4,
.ashby-job-posting-heading,
.ashby-application-form-section-header-title,
.ashby-application-form-question-title,
.ashby-application-form-autofill-input-title,
.ashby-job-posting-left-pane p {
  color: var(--bdm-primary);
}

/* ---- Headings: match boredm.com weights & tracking ---- */
.ashby-job-posting-heading {
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.ashby-application-form-section-header-title {
  font-weight: 700;
  letter-spacing: -0.015em;
}

.ashby-application-form-question-title {
  font-weight: 500;
}

/* Left-pane meta labels ("Location", "Department") */
.ashby-job-posting-left-pane h2 {
  color: var(--bdm-text);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0;
}

/* ---- Kill rounded corners (boredm.com is 0px radius throughout) ---- */
button,
input,
select,
textarea,
.ashby-application-form-input-text,
.ashby-application-form-input-textarea,
.ashby-application-form-input-yesno-option,
.ashby-application-form-input-file-dropzone,
.ashby-application-form-input-radio-group-option,
.ashby-application-form-submit-button {
  border-radius: 0 !important;
}

/* ---- Inputs: 1px #d1d1d1 hairline, BoreDM padding, black focus outline ---- */
.ashby-application-form-input-text,
.ashby-application-form-input-textarea {
  border: 1px solid var(--bdm-border) !important;
  padding: 14px 16px;
  color: var(--bdm-primary);
  background: #fff;
  transition: border-color .2s;
}

.ashby-application-form-input-text:hover,
.ashby-application-form-input-textarea:hover {
  border-color: var(--bdm-primary) !important;
}

.ashby-application-form-input-text:focus,
.ashby-application-form-input-textarea:focus {
  border-color: var(--bdm-primary) !important;
  outline: 2px solid var(--bdm-primary) !important;
  outline-offset: 3px;
}

/* ---- Buttons: flat, 1px border, weight 500, no shadow, no tracking ---- */
.ashby-application-form-container button,
.ashby-application-form-autofill-pane button,
.ashby-application-form-submit-button {
  box-shadow: none !important;
  letter-spacing: 0 !important;
  font-weight: 500 !important;
  border-width: 1px !important;
  border-style: solid !important;
  padding: 12px 20px !important;
  line-height: 1.3 !important;
  transition: background .2s, color .2s, border-color .2s;
}

.ashby-application-form-container button:focus,
.ashby-application-form-autofill-pane button:focus {
  outline: 2px solid var(--bdm-primary);
  outline-offset: 3px;
}

/* Primary (Submit Application) */
.ashby-application-form-submit-button {
  background: var(--bdm-primary) !important;
  border-color: var(--bdm-primary) !important;
  color: #fff !important;
}

.ashby-application-form-submit-button:hover {
  background: var(--bdm-hover) !important;
  border-color: var(--bdm-hover) !important;
}

/* Secondary / outlined (Upload file buttons) */
.ashby-application-form-autofill-pane button,
.ashby-application-form-input-file-dropzone-upload {
  background: transparent !important;
  border: 1px solid var(--bdm-primary) !important;
  color: var(--bdm-primary) !important;
}

.ashby-application-form-autofill-pane button:hover,
.ashby-application-form-input-file-dropzone-upload:hover {
  background: var(--bdm-outlined-hover) !important;
}

/* Small CTA button inside the autofill card */
.ashby-application-form-autofill-pane button {
  font-size: 14px !important;
  padding: 10px 18px !important;
}

/* ---- Yes / No toggle: square, hairline, black when selected ---- */
.ashby-application-form-input-yesno .ashby-application-form-input-yesno-option {
  border: 1px solid var(--bdm-border) !important;
  color: var(--bdm-text) !important;
  background: transparent !important;
  font-weight: 500 !important;
  padding: 16px !important;
  margin-left: -1px;   /* collapse the double border between Yes and No */
}

.ashby-application-form-input-yesno .ashby-application-form-input-yesno-option:hover {
  background: var(--bdm-outlined-hover) !important;
}

.ashby-application-form-input-yesno .ashby-application-form-input-yesno-option[aria-pressed="true"] {
  background: var(--bdm-primary) !important;
  border-color: var(--bdm-primary) !important;
  color: #fff !important;
  position: relative;
  z-index: 1;
}

/* ---- File dropzone ---- */
.ashby-application-form-input-file-dropzone {
  border: 1px dashed var(--bdm-border) !important;
  background: var(--bdm-light);
}

/* ---- Autofill-from-resume card: square hairline card on the site's light gray ---- */
.ashby-application-form-autofill-input-root {
  border: 1px solid var(--bdm-border) !important;
  border-radius: 0 !important;
  background: var(--bdm-light) !important;
}

.ashby-application-form-autofill-input-drag-layer,
.ashby-application-form-autofill-input-pending-layer {
  border-radius: 0 !important;
}

/* ---- Overview / Application tab underline ---- */
.ashby-job-posting-right-pane-tab-slider {
  background: var(--bdm-primary) !important;
  height: 2px;
}

.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab {
  font-weight: 500;
}

/* ---- Links inside the job description text only (not the tabs) ---- */
.ashby-job-posting-right-pane p a,
.ashby-job-posting-right-pane li a {
  color: var(--bdm-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ashby-job-posting-right-pane p a:hover,
.ashby-job-posting-right-pane li a:hover {
  color: var(--bdm-hover);
}

/* Back arrow */
.ashby-job-board-back-to-all-jobs-button {
  color: var(--bdm-primary);
}
