/* ============================================================
   Oath — Ashby Job Board custom CSS  (v5)
   Warm cream sand · deep teal accent · espresso ink.
   Upload this file under Job Board Options → Custom CSS.

   Admin theme settings to match (Job Board Options):
     Brand Color        #00828D   (teal-500, primary CTA / links)
     Brand Color (Dark) #006D77   (teal-600, hover)

   v5 changes:
     - FIX: tab underline no longer strikes through "Overview".
            (The .ashby-...-tab-slider is Ashby's animated indicator,
             not a container — it is now pinned to the row bottom and
             the divider is drawn on the tab row itself.)
     - A11y: teal text on the sand page now uses teal-600 (AA pass).
     - A11y: SMS-consent fine print darkened to brown-600 (AA pass).
     - A11y: success-message green darkened (AA pass).
     - Mobile: reduced padding + heading size under 480px.
   ============================================================ */

/* Load brand fonts (Ashby allows @import in custom CSS). */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Fira+Code:wght@400;500&display=swap");

:root {
  /* ---- Oath palette ---- */
  --oath-sand-50:   #FCF7EC;
  --oath-sand-100:  #F7F0E3;
  --oath-sand-200:  #F4F3F0;
  --oath-sand-300:  #E8DCC8;
  --oath-sand-400:  #DDD5C8;
  --oath-teal-400:  #009DAB;
  --oath-teal-500:  #00828D;
  --oath-teal-600:  #006D77;
  --oath-teal-50:   #E6F4F5;
  --oath-brown-400: #8A8275;
  --oath-brown-500: #7A7060;
  --oath-brown-600: #645344;
  --oath-green-600: #3F6B4C;   /* AA-safe positive on teal-50 */
  --oath-ink-900:   #1A1A1A;
  --oath-white:     #FFFFFF;
  --oath-white-80:  rgba(255,255,255,0.80);

  /* ---- Ashby theme hooks (mirror the admin Brand Color settings) ---- */
  --colorPrimary600: #00828D;   /* lighter / main brand color */
  --colorPrimary900: #006D77;   /* darker / hover */

  /* ---- Ashby layout tokens ---- */
  --widthMaxJobBoard: 860px;
  --borderRadiusContainer: 14px;   /* Oath signature card radius */
  --borderRadiusControl: 10px;
  --borderRadiusButton: 10px;
  --colorAppBackground: #FCF7EC;   /* sand page */

  --fontFamily: "Inter", "Helvetica Now Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ------------------------------------------------------------
   Base type on the application container
   (transparent so it inherits the surrounding surface — sand on
   the standalone apply page, white inside the job posting pane)
   ------------------------------------------------------------ */
.ashby-application-form-container {
  background: transparent;
  font-family: var(--fontFamily);
  color: var(--oath-ink-900);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.0156em;
}

/* ------------------------------------------------------------
   Job board header
   ------------------------------------------------------------ */
.ashby-job-board-heading {
  font-weight: 700;
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: -0.025em;
  color: var(--oath-ink-900);
}

.ashby-job-board-heading-count {
  font-weight: 500;
  color: var(--oath-brown-500);
}

/* ------------------------------------------------------------
   Filters
   ------------------------------------------------------------ */
.ashby-job-board-filters-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--oath-brown-500);
}

.ashby-job-board-filter {
  background: var(--oath-white);
  border: 1px solid var(--oath-sand-400);
  border-radius: 10px;
  color: var(--oath-ink-900);
  font-family: var(--fontFamily);
  transition: border-color 200ms cubic-bezier(0.2,0.8,0.2,1),
              box-shadow 200ms cubic-bezier(0.2,0.8,0.2,1);
}
.ashby-job-board-filter:hover {
  border-color: var(--oath-brown-400);
}
.ashby-job-board-filter:focus,
.ashby-job-board-filter:focus-within {
  border-color: var(--oath-teal-500);
  box-shadow: 0 0 0 3px rgba(0,130,141,0.20);
  outline: none;
}

/* teal-600 keeps AA contrast (>=4.5) against the sand page */
.ashby-job-board-reset-filters-label {
  color: var(--oath-teal-600);
  font-weight: 600;
}
.ashby-job-board-reset-filters-label:hover {
  color: var(--oath-teal-600);
  text-decoration: underline;
}

/* ------------------------------------------------------------
   Department / team headings
   ------------------------------------------------------------ */
.ashby-department-heading,
.ashby-job-posting-brief-department-heading {
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--oath-ink-900);
  border-bottom: 1px solid var(--oath-sand-400);
  padding-bottom: 8px;
}

.ashby-department-heading-level,
.ashby-job-posting-brief-department-heading-level {
  font-weight: 600;
  font-size: 15px;
  color: var(--oath-brown-600);
}

/* ------------------------------------------------------------
   Job posting rows (the list)
   ------------------------------------------------------------ */
.ashby-job-posting-brief {
  background: var(--oath-white-80);
  border: 1px solid #CBBFA9;   /* warm, noticeable hairline all around */
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 10px;
  box-shadow: none;
  transition: background 200ms cubic-bezier(0.2,0.8,0.2,1),
              border-color 200ms cubic-bezier(0.2,0.8,0.2,1);
}
.ashby-job-posting-brief:hover {
  background: var(--oath-white);
  border-color: var(--oath-teal-500);
}

.ashby-job-posting-brief-title {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--oath-ink-900);
}
.ashby-job-posting-brief:hover .ashby-job-posting-brief-title {
  color: var(--oath-teal-600);
}

.ashby-job-posting-brief-details {
  color: var(--oath-brown-500);
  font-size: 14px;
}

/* ------------------------------------------------------------
   Individual job posting page
   ------------------------------------------------------------ */
.ashby-job-posting-header,
.ashby-job-posting-heading {
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--oath-ink-900);
}

.ashby-job-posting-left-pane {
  color: var(--oath-brown-600);
  line-height: 1.625;
  padding-right: 8px;   /* let detail rows breathe a little more */
}
.ashby-job-posting-left-pane h1,
.ashby-job-posting-left-pane h2,
.ashby-job-posting-left-pane h3,
.ashby-job-posting-left-pane strong {
  color: var(--oath-ink-900);
}
.ashby-job-posting-left-pane a {
  color: var(--oath-teal-500);
  text-decoration: none;
}
.ashby-job-posting-left-pane a:hover {
  color: var(--oath-teal-600);
  text-decoration: underline;
}

.ashby-job-posting-right-pane {
  background: var(--oath-white-80);
  border: 1px solid var(--oath-sand-400);
  border-radius: 14px;
  padding: 32px;
}

/* ------------------------------------------------------------
   Overview / Application tab slider
   ------------------------------------------------------------
   NOTE: .ashby-...-tab-slider is Ashby's animated 2px indicator
   bar, NOT the tab-row container. Styling it as a container (border
   + margin) pushed it into the middle of the text and made it strike
   through "Overview". We pin it to the bottom of the row and draw the
   divider on the row (the <nav> that contains the slider) instead.
   ------------------------------------------------------------ */
.ashby-job-posting-right-pane-tab-slider {
  top: auto;
  bottom: 0;
  height: 2px;
  border: none;
  margin: 0;
  background: var(--oath-teal-500);
}
/* The tab row is the nav that directly contains the slider. */
nav:has(> .ashby-job-posting-right-pane-tab-slider) {
  border-bottom: 1px solid var(--oath-sand-400);
  margin-bottom: 24px;
}

.ashby-job-posting-right-pane-application-tab,
.ashby-job-posting-right-pane-overview-tab {
  color: var(--oath-brown-500);
  font-weight: 600;
  padding-bottom: 12px;
  line-height: 1.4;
}
.ashby-job-posting-right-pane-application-tab[aria-selected="true"],
.ashby-job-posting-right-pane-overview-tab[aria-selected="true"] {
  color: var(--oath-teal-500);
}

/* Back to all jobs — teal-600 for AA contrast on the sand page */
.ashby-job-board-back-to-all-jobs-button {
  color: var(--oath-teal-600);
  font-weight: 600;
  border-radius: 10px;
}
.ashby-job-board-back-to-all-jobs-button:hover {
  color: var(--oath-teal-600);
  text-decoration: underline;
}

/* ------------------------------------------------------------
   Application form
   ------------------------------------------------------------ */
.ashby-application-form-section-container {
  margin-bottom: 8px;
}
.ashby-application-form-section-header {
  margin-bottom: 20px;
}
.ashby-application-form-section-header-title {
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--oath-ink-900);
  margin-bottom: 6px;
}
.ashby-application-form-section-header-description,
.ashby-application-form-question-description {
  color: var(--oath-brown-500);
  font-size: 14px;
  line-height: 1.625;
}

.ashby-application-form-field-entry {
  margin-bottom: 20px;
}
.ashby-application-form-question-title {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.005em;
  color: var(--oath-brown-600);
  margin-bottom: 8px;
}

.ashby-application-form-field-entry input,
.ashby-application-form-field-entry textarea,
.ashby-application-form-field-entry select {
  background: var(--oath-white);
  border: 1px solid var(--oath-sand-300);
  border-radius: 10px;
  color: var(--oath-ink-900);
  font-family: var(--fontFamily);
  font-size: 15px;
  padding: 14px 16px;
  transition: border-color 200ms cubic-bezier(0.2,0.8,0.2,1),
              box-shadow 200ms cubic-bezier(0.2,0.8,0.2,1);
}
.ashby-application-form-field-entry input:hover,
.ashby-application-form-field-entry textarea:hover,
.ashby-application-form-field-entry select:hover {
  border-color: var(--oath-brown-400);
}
.ashby-application-form-field-entry input:focus,
.ashby-application-form-field-entry textarea:focus,
.ashby-application-form-field-entry select:focus {
  border-color: var(--oath-teal-500);
  box-shadow: 0 0 0 3px rgba(0,130,141,0.20);
  outline: none;
}

/* Submit button — primary teal CTA */
.ashby-application-form-submit-button {
  background: var(--oath-teal-500);
  color: var(--oath-white);
  border: 0;
  border-radius: 10px;
  font-family: var(--fontFamily);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.0156em;
  padding: 16px 24px;
  margin-top: 12px;
  transition: background 200ms cubic-bezier(0.2,0.8,0.2,1),
              transform 120ms cubic-bezier(0.2,0.8,0.2,1);
}
.ashby-application-form-submit-button:hover {
  background: var(--oath-teal-600);
}
.ashby-application-form-submit-button:active {
  transform: translateY(1px);
  background: var(--oath-teal-600);
}

/* ------------------------------------------------------------
   Resume autofill card
   ------------------------------------------------------------ */
.ashby-application-form-autofill-input-root {
  background: var(--oath-teal-50);
  border: 1px solid var(--oath-sand-400);
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 28px;
}
.ashby-application-form-autofill-input-root[data-state="drag"] {
  border: 2px dashed var(--oath-teal-500);
}
.ashby-application-form-autofill-input-title {
  font-weight: 700;
  color: var(--oath-ink-900);
}
.ashby-application-form-autofill-input-description {
  color: var(--oath-brown-500);
}
.ashby-application-form-autofill-input-icon {
  color: var(--oath-teal-500);
}
.ashby-application-form-autofill-input-form-alert[data-highlight="positive"] {
  color: var(--oath-green-600);
}
.ashby-application-form-autofill-input-form-alert[data-highlight="negative"] {
  color: #B0463C;
}

/* ------------------------------------------------------------
   Success / failure containers
   ------------------------------------------------------------ */
.ashby-application-form-success-container {
  background: var(--oath-teal-50);
  border: 1px solid var(--oath-sand-400);
  border-radius: 14px;
  color: var(--oath-ink-900);
}
.ashby-application-form-failure-container,
.ashby-application-form-blocked-application-container {
  background: var(--oath-white-80);
  border: 1px solid var(--oath-sand-400);
  border-radius: 14px;
  color: var(--oath-ink-900);
}

/* SMS-consent fine print — brown-600 for AA contrast at 12px */
.ashby-application-form-texting-consent-description {
  color: var(--oath-brown-600);
  font-size: 12px;
}

/* ------------------------------------------------------------
   Mobile / small screens
   ------------------------------------------------------------ */
@media (max-width: 480px) {
  .ashby-job-board-heading {
    font-size: 24px;
  }
  .ashby-job-posting-right-pane {
    padding: 20px;
  }
  .ashby-application-form-autofill-input-root {
    padding: 16px 18px;
  }
  .ashby-application-form-field-entry input,
  .ashby-application-form-field-entry textarea,
  .ashby-application-form-field-entry select {
    font-size: 16px;   /* prevents iOS zoom-on-focus */
  }
}