/* stylelint-disable */

/* ==========================================================================
   Ashby embedded job board — custom styles
   --------------------------------------------------------------------------
   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://www.impactmybiz.com/ashby-board.css — allow-list that exact url and
   set it as `customCssUrl` in components/Modules/Open-Jobs-Feed-Ashby/index.jsx.)

   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.
   ========================================================================== */

/* Impact's Typekit kit (Montserrat / Bebas Neue Pro / Oswald).
   NOTE: the board iframe is on jobs.ashbyhq.com, and Adobe Fonts only serves a
   kit to its allow-listed domains. For these fonts to load here, add
   jobs.ashbyhq.com to this kit's allowed domains in Adobe Fonts. If it stays
   blocked, everything below falls back to a clean system sans-serif. */
@import url('https://use.typekit.net/xwq4xen.css');

/* These variables control values throughout the job board. */
:root {
  /* Brand red. Also set in Ashby admin theme settings (injected inline on the
     board's <html>, so admin wins) — kept here in sync for documentation. */
  --colorPrimary600: #e4002b; /* Impact red (red300) */
  --colorPrimary900: #ba0c2f; /* darker red */

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

  /* Squared-off radius to match the site's buttons (4px). */
  --borderRadiusContainer: 4px;
  --borderRadiusControl: 4px;
  --borderRadiusButton: 4px;

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

  /* Match the module wrapper background (variables.colors.neutral100) so the
     board blends seamlessly with the section around the iframe. */
  --colorAppBackground: #fafafa;

  /* Helpers (Impact neutral palette from styles/variables.jsx). */
  --immFontHeading: 'bebas-neue-pro', montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --immColorText: #1c262b; /* neutral800 */
  --immColorTextMuted: #6f7375; /* neutral600 */
  --immColorBorder: #ebeced; /* neutral200 */
}

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

/* The heading of the entire job board. */
.ashby-job-board-heading {
  font-family: var(--immFontHeading);
  font-weight: 700;
  color: var(--immColorText);
  letter-spacing: 0.01em;
  font-size: 2.25rem; /* ADDED: display scale — Bebas is condensed, so size it up. If Ashby's default wins on load, append !important */
  line-height: 1.05; /* ADDED */
}

/* The count of job postings on the job board (the "(0)" next to the heading). */
.ashby-job-board-heading-count {
  color: var(--immColorTextMuted);
  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(--immColorTextMuted);
}

/* A select box element for filtering the job board (Department, Location, etc.). */
.ashby-job-board-filter {
  border: 1px solid var(--immColorBorder) !important;
  border-radius: var(--borderRadiusControl) !important;
  background-color: #fff !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(228, 0, 43, 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: #fff;
  border: 1px solid var(--immColorBorder);
  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(0, 0, 0, 0.08);
  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(--immColorText);
  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(--immColorTextMuted);
  font-size: 0.9rem;
}

/* Department heading grouping teams, in the list. */
.ashby-job-posting-brief-department-heading {
  font-family: var(--immFontHeading);
  font-weight: 700;
  color: var(--immColorText);
  letter-spacing: 0.02em;
  font-size: 1.35rem; /* ADDED: divider treatment to match preview */
  margin: 1.75rem 0 0.75rem; /* ADDED */
  padding-bottom: 0.5rem; /* ADDED */
  border-bottom: 1px solid var(--immColorBorder); /* ADDED */
}

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

/* ==========================================================================
   BOARD DESCRIPTION — intro text + video embed
   ========================================================================== */

/* The intro copy + video live in Ashby's top-description container. With the
   board max-width removed they stretched the full content width (~1680px), which
   made the text an uncomfortable measure and left the video oversized. Cap the
   whole block to a readable, centered column so the copy and video read as one.
   The class carries a CSS-module hash (_topDescription_1dvh9_29) that can change
   on Ashby deploys, so match on the stable prefix. */
[class*='_topDescription_'] {
  max-width: 800px !important;
  margin: 0 auto !important;
}

/* The culture video is a Vidyard embed wrapped in the classic responsive
   aspect-ratio markup Ashby generates:
     <div>                                        <- outer wrapper
       <div style="padding-bottom:56.32%">        <- aspect box (height via padding)
         <iframe ...position:absolute;width:100%;height:100%>
   A padding-bottom percentage resolves against the PARENT's width, so we cap the
   OUTER wrapper — capping the iframe or the inner box leaves the height computed
   from full width, shrinking the video to a tall portrait box with empty space
   below. It fills the 800px description column (-> 800x451, 16:9). Verified
   against the real DOM. Needs :has() (all evergreen browsers); older browsers
   just fall back to full width. */
div:has(> div > iframe[src*='embedded-media.ashbyhq.com']) {
  max-width: 800px !important;
  margin: 16px auto !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12) !important;
}

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

/* The heading of a department, which can have many teams under it. */
.ashby-department-heading {
  font-family: var(--immFontHeading);
  font-weight: 700;
  color: var(--immColorText);
  letter-spacing: 0.02em;
  font-size: 1.35rem; /* ADDED: divider treatment to match preview */
  margin: 1.75rem 0 0.75rem; /* ADDED */
  padding-bottom: 0.5rem; /* ADDED */
  border-bottom: 1px solid var(--immColorBorder); /* ADDED */
}

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

/* ==========================================================================
   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(--immFontHeading);
  color: var(--immColorText);
}

/* The heading of a job post. */
.ashby-job-posting-heading {
  font-family: var(--immFontHeading);
  font-weight: 700;
  color: var(--immColorText);
}

/* 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 {
}

/* ADDED: The form's own inputs — squared, neutral border, red focus ring to
   match the filter selects. Ashby exposes no class on the raw controls, so
   target them inside the field-entry container. Native input/textarea/select
   only; custom (div-based) fields like file uploads won't be caught. */
.ashby-application-form-field-entry input,
.ashby-application-form-field-entry textarea,
.ashby-application-form-field-entry select {
  border: 1px solid var(--immColorBorder) !important;
  border-radius: var(--borderRadiusControl) !important;
  background-color: #fff !important;
  font-family: var(--fontFamily) !important;
  color: var(--immColorText) !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}
.ashby-application-form-field-entry input:hover,
.ashby-application-form-field-entry textarea:hover,
.ashby-application-form-field-entry select:hover {
  border-color: var(--colorPrimary600) !important;
}
.ashby-application-form-field-entry input:focus,
.ashby-application-form-field-entry textarea:focus,
.ashby-application-form-field-entry select:focus {
  outline: none !important;
  border-color: var(--colorPrimary600) !important;
  box-shadow: 0 0 0 3px rgba(228, 0, 43, 0.15) !important;
}

/* 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(--immFontHeading);
  font-weight: 700;
  color: var(--immColorText);
}

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

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

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

/* The submit button. Matches the site's primary button. Test loading + hover. */
.ashby-application-form-submit-button {
  background-color: var(--colorPrimary600) !important;
  color: #fafafa !important;
  border: none !important;
  border-radius: var(--borderRadiusButton) !important;
  padding: 12px 32px !important;
  font-family: var(--fontFamily) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  transition: all 0.2s ease-in-out !important;
}
.ashby-application-form-submit-button:hover,
.ashby-application-form-submit-button:focus,
.ashby-application-form-submit-button:active {
  background-color: var(--colorPrimary900) !important;
  box-shadow: inset 4px 4px 5px 3px rgba(0, 0, 0, 0.25) !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 {
}