/* stylelint-disable */

/* ==========================================================================
   Ashby embedded job board — custom styles (DOT Security)
   --------------------------------------------------------------------------
   The Ashby board renders inside a cross-origin <iframe>, so the site's own
   CSS cannot reach it. Ashby injects the board's custom CSS into the iframe.

   SOURCE OF TRUTH — this file is NOT imported or served by the app. The live
   copy is pasted into Ashby admin theme settings (Brand → custom CSS upload),
   and Ashby injects it into the board iframe. Edit the styles in Ashby admin
   and keep this file in sync so the CSS stays reviewable in git.

   (If you ever switch to Ashby's URL-based "Allowed Custom CSS URLs" instead,
   this file is already in /public, so it would serve at
   https://dotsecurity.com/css/ashby-board.css — allow-list that exact url and
   set it as `customCssUrl` in components/OpenJobsFeedAshby.js.)

   Selectors and comments below are from Ashby's official starter
   (ashbyhq.com/job_board_example_css/full-job-board.css). Overrides sometimes
   need `!important` to beat Ashby's defaults, so brand-critical rules use it.
   ========================================================================== */

/* KoHo — the site's heading face. A Google Font, so it is served to any
   domain and will load inside the board iframe with no extra setup. */
@import url('https://fonts.googleapis.com/css2?family=KoHo:wght@300;400;500;600&display=swap');

/* Graphie — the site's body face, from DOT's Adobe Typekit kit (see
   pages/_document.js). Adobe Fonts only serves a kit to its allow-listed
   domains, so add jobs.ashbyhq.com to this kit's allowed domains for it to
   load here. If it stays blocked, body copy falls back to the same system
   stack that styles/globals.css uses, and headings still render in KoHo. */
@import url('https://use.typekit.net/pzg3dsj.css');

/* These variables control values throughout the job board. */
:root {
  /* DOT blue. Also set in Ashby admin theme settings (injected inline on the
     board's <html>, so admin wins) — kept here in sync for documentation. */
  --colorPrimary600: #113ced; /* variables.blue */
  --colorPrimary900: #1232f5; /* variables.softBlue */

  /* Remove the default 800px cap so the board fills the content column.
     The board is still bounded by its wrapper on the page (950px, matching
     GenericHeadingComponent2 above it). !important guards against Ashby's own
     :root default winning on load order. */
  --widthMaxJobBoard: none !important;

  /* The site is squared-off — border-radius is unused outside of circular
     avatars, and the primary CTA has no radius at all. */
  --borderRadiusContainer: 0;
  --borderRadiusControl: 0;
  --borderRadiusButton: 0;

  /* Match the site's typography. Falls back to the globals.css system stack if
     Typekit is not served to the iframe domain (see @import note above). */
  --fontFamily: graphie, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* The board sits inside GenericWrapperComponent3, which is white, so the
     iframe blends into the section around it. */
  --colorAppBackground: #ffffff;

  /* Helpers (DOT palette from styles/variables.js). */
  --dotFontHeading: 'KoHo', var(--fontFamily);
  --dotColorHeading: #1232f5; /* softBlue — same as the section heading above */
  --dotColorText: #202635; /* charcoal */
  --dotColorTextMuted: rgba(32, 38, 53, 0.7);
  --dotColorBorder: rgba(32, 38, 53, 0.15);
  --dotColorGreen: #00ffbd; /* green — primary CTA fill */
  --dotColorShadowBlue: #0be4ac; /* active state on the primary CTA */
}

/* ==========================================================================
   JOB BOARD — the list view (your "Open Positions" page)
   ========================================================================== */

/* The heading of the entire job board. */
.ashby-job-board-heading {
  font-family: var(--dotFontHeading);
  font-weight: 400;
  color: var(--dotColorHeading);
  letter-spacing: 0.01em;
}

/* The count of job postings on the job board (the "(0)" next to the heading). */
.ashby-job-board-heading-count {
  color: var(--dotColorTextMuted);
  font-weight: 400;
}

/* The 'Filters' label element. */
.ashby-job-board-filters-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--dotColorTextMuted);
}

/* A select box element for filtering the job board (Department, Location, etc.). */
.ashby-job-board-filter {
  border: 1px solid var(--dotColorBorder) !important;
  border-radius: var(--borderRadiusControl) !important;
  background-color: #ffffff !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}
.ashby-job-board-filter:hover {
  border-color: var(--colorPrimary600) !important;
}
.ashby-job-board-filter:focus,
.ashby-job-board-filter:focus-within {
  border-color: var(--colorPrimary600) !important;
  box-shadow: 0 0 0 3px rgba(17, 60, 237, 0.15) !important;
}

/* The 'Reset filters' label element. */
.ashby-job-board-reset-filters-label {
  color: var(--colorPrimary600) !important;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.15s ease-in-out;
}
.ashby-job-board-reset-filters-label:hover {
  text-decoration-color: var(--colorPrimary600);
}

/* The container for the list of job posting briefings. */
.ashby-job-posting-brief-list {
}

/* The container of a single job posting row in the list — styled as a card. */
.ashby-job-posting-brief {
  background-color: #ffffff;
  border: 1px solid var(--dotColorBorder);
  border-radius: var(--borderRadiusContainer);
  padding: 20px 24px;
  margin-bottom: 12px;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.ashby-job-posting-brief:hover {
  border-color: var(--colorPrimary600);
  box-shadow: 0 6px 18px rgba(17, 60, 237, 0.12);
  transform: translateY(-2px);
}

/* The title of a job posting in the list. */
.ashby-job-posting-brief-title {
  font-family: var(--fontFamily);
  font-weight: 600;
  color: var(--dotColorText);
  transition: color 0.15s ease-in-out;
}
.ashby-job-posting-brief:hover .ashby-job-posting-brief-title {
  color: var(--colorPrimary600);
}

/* The details (location, team, etc.) of a job posting in the list. */
.ashby-job-posting-brief-details {
  color: var(--dotColorTextMuted);
  font-size: 0.9rem;
}

/* Department heading grouping teams, in the list. */
.ashby-job-posting-brief-department-heading {
  font-family: var(--dotFontHeading);
  font-weight: 400;
  color: var(--dotColorHeading);
  letter-spacing: 0.02em;
}

/* Single team heading, in the list. */
.ashby-job-posting-brief-department-heading-level {
  color: var(--dotColorTextMuted);
}

/* ==========================================================================
   DEPARTMENTS
   ========================================================================== */

/* The heading of a department, which can have many teams under it. */
.ashby-department-heading {
  font-family: var(--dotFontHeading);
  font-weight: 400;
  color: var(--dotColorHeading);
  letter-spacing: 0.02em;
}

/* The heading of a single team. */
.ashby-department-heading-level {
  color: var(--dotColorTextMuted);
}

/* ==========================================================================
   JOB POSTING — the individual posting/detail view
   ========================================================================== */

/* The button to go from an individual posting back to the full list. */
.ashby-job-board-back-to-all-jobs-button {
  color: var(--colorPrimary600) !important;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.15s ease-in-out;
}
.ashby-job-board-back-to-all-jobs-button:hover {
  text-decoration-color: var(--colorPrimary600);
}

/* The main header on the job posting page. */
.ashby-job-posting-header {
  font-family: var(--dotFontHeading);
  color: var(--dotColorHeading);
}

/* The heading of a job post. */
.ashby-job-posting-heading {
  font-family: var(--dotFontHeading);
  font-weight: 400;
  color: var(--dotColorHeading);
}

/* Left pane of the job posting (the posting details/description). */
.ashby-job-posting-left-pane {
}

/* Right pane of the job posting (tabs, overview, application form). */
.ashby-job-posting-right-pane {
}

/* The application tab in the right pane. */
.ashby-job-posting-right-pane-application-tab {
}

/* The overview tab in the right pane. */
.ashby-job-posting-right-pane-overview-tab {
}

/* The tabs slider in the right pane. */
.ashby-job-posting-right-pane-tab-slider {
}

/* ==========================================================================
   APPLICATION FORM
   ========================================================================== */

/* Container for the application form. */
.ashby-application-form-container {
}

/* Container for a label + input on the form. */
.ashby-application-form-field-entry {
}

/* A single section on the form (questions are grouped in sections). */
.ashby-application-form-section-container {
}

/* Header for a form section (title + optional description). */
.ashby-application-form-section-header {
}

/* Title for a form section. */
.ashby-application-form-section-header-title {
  font-family: var(--dotFontHeading);
  font-weight: 400;
  color: var(--dotColorHeading);
}

/* Description for a form section (only if a description was specified). */
.ashby-application-form-section-header-description {
  color: var(--dotColorTextMuted);
}

/* Title of each question. */
.ashby-application-form-question-title {
  font-family: var(--fontFamily);
  font-weight: 600;
  color: var(--dotColorText);
}

/* Description of each question (only if specified). */
.ashby-application-form-question-description {
  color: var(--dotColorTextMuted);
}

/* The submit button. Mirrors the site's primary CTA (green fill, blue label,
   white on hover, shadowBlue while pressed). Test loading + hover. */
.ashby-application-form-submit-button {
  background-color: var(--dotColorGreen) !important;
  color: var(--colorPrimary600) !important;
  border: none !important;
  border-radius: var(--borderRadiusButton) !important;
  padding: 8px 22px !important;
  font-family: var(--fontFamily) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  letter-spacing: 0.8px !important;
  transition: background 0.5s, color 0.5s !important;
}
.ashby-application-form-submit-button:hover,
.ashby-application-form-submit-button:focus {
  background-color: #ffffff !important;
  color: var(--colorPrimary600) !important;
}
.ashby-application-form-submit-button:active {
  background-color: var(--dotColorShadowBlue) !important;
}

/* Success message container. */
.ashby-application-form-success-container {
}

/* Failure message container. */
.ashby-application-form-failure-container {
}

/* Blocked-application message container. */
.ashby-application-form-blocked-application-container {
}

/* Text-message consent note below phone fields (only if texting is enabled). */
.ashby-application-form-texting-consent-description {
}

/* Container for any surveys attached to the application form. */
.ashby-survey-form-container {
}

/* --- Resume autofill widget (parses a resume to prefill the form) --- */

/* Autofill root. [data-state] can be 'pending', 'drag', or 'default'. */
.ashby-application-form-autofill-input-root {
}

/* Autofill base layer (copy, CTA button, validation alerts). */
.ashby-application-form-autofill-input-base-layer {
}

/* Autofill title. */
.ashby-application-form-autofill-input-title {
}

/* Autofill description. */
.ashby-application-form-autofill-input-description {
}

/* Autofill magic-sparkles icon. */
.ashby-application-form-autofill-input-icon {
}

/* Autofill drag-state overlay. [data-state] can be 'active' or 'hidden'. */
.ashby-application-form-autofill-input-drag-layer {
}

/* Autofill pending-state overlay. [data-state] can be 'active' or 'hidden'. */
.ashby-application-form-autofill-input-pending-layer {
}

/* Autofill form alert. [data-highlight] can be 'negative' or 'positive'. */
.ashby-application-form-autofill-input-form-alert {
}

/* Container for the autofill input form. */
.ashby-application-form-autofill-pane {
}

/* The resume uploader used to auto-fill the form. */
.ashby-application-form-autofill-uploader {
}