/**
 * Unleashd.ca-aligned overrides for the careers / job board page.
 * Tokens and measurements taken from unleashd.ca Webflow CSS
 * (test-unleashd.webflow.shared.*.min.css): Filson Pro Bold headings,
 * Proxima Nova body copy, brand pink buttons (pill, 48px min height).
 */

/* --- Fonts (same assets as unleashd.ca) --- */
@font-face {
    font-family: "Filson Pro Bold";
    src: url("https://cdn.prod.website-files.com/63e41e469cf8143e7420fc02/647e51d8189211c8db663696_FilsonProBold.woff")
      format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: "Proxima Nova";
    src: url("https://cdn.prod.website-files.com/63e41e469cf8143e7420fc02/63e43f719b425a92e6fc9f62_ProximaNova-Regular.otf")
        format("opentype"),
      url("https://cdn.prod.website-files.com/63e41e469cf8143e7420fc02/63f032f6ffaabc0d6a06c718_Proxima%20Nova%20Regular.otf")
        format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: "Proxima Nova";
    src: url("https://cdn.prod.website-files.com/63e41e469cf8143e7420fc02/63f032f60a6a4daad8e8d4c1_Proxima%20Nova%20Semibold.otf")
      format("opentype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: "Proxima Nova";
    src: url("https://cdn.prod.website-files.com/63e41e469cf8143e7420fc02/63e43f71d77d821ce5ae7e7e_Proxima%20Nova%20Bold.otf")
        format("opentype"),
      url("https://cdn.prod.website-files.com/63e41e469cf8143e7420fc02/63f032f6ad117e750cbb83d2_Proxima%20Nova%20Bold.otf")
        format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  
  /* --- Design tokens (unleashd.ca :root) --- */
  :root {
    --brand: #fe1162;
    --brand-hover: #e21852;
    --brand-active: #d4174d;
    --gray-900: #000000;
    --gray-700: #282556;
    --gray-500: #6b7094;
    --gray-200: #f3f5fb;
    --gray-400: #b6b9ce;
    --light-slate-grey: #7c8b9d;
    --white: #ffffff;
    /* Humi board uses this custom prop for accents — align to main site */
    --button-color: var(--brand);
  }
  
  /* --- Global typography --- */
  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  body,
  body.bg-white {
    font-family: "Proxima Nova", "Poppins", system-ui, -apple-system, "Segoe UI",
      Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: var(--gray-700);
  }
  
  /* Headings: Filson Pro Bold like unleashd hero / section titles */
  h1,
  .category-header {
    font-family: "Filson Pro Bold", "Proxima Nova", sans-serif;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--gray-900);
  }
  
  .category-header {
    line-height: 1.15;
  }
  
  /* Meta lines (location, type, date) — slate tone from marketing site */
  .job-posting .text-xs,
  .job-posting .text-sm,
  .text-neutral-500 {
    color: var(--light-slate-grey) !important;
  }
  
  /* Job title links */
  a.text-default-button {
    color: var(--brand) !important;
    letter-spacing: -0.01em;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease, background-color 0.2s ease;
  }
  
  a.text-default-button:hover {
    color: var(--brand-hover) !important;
    text-decoration: underline;
  }
  
  /* --- Primary buttons (match .f-button-neutral on unleashd.ca) --- */
  /* Higher specificity than `button:not(.social)` inline rules so label stays white */
  button.text-white.rounded-lg.font-medium.bg-default-button,
  button.bg-default-button.text-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 32px !important;
    border: none;
    border-radius: 50px !important;
    background-color: var(--brand) !important;
    color: var(--white) !important;
    font-family: "Proxima Nova", "Poppins", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.15s ease;
    box-shadow: none;
  }
  
  button.text-white.rounded-lg.font-medium.bg-default-button:hover,
  button.bg-default-button.text-white:hover {
    background-color: var(--brand-hover) !important;
    color: var(--white) !important;
  }
  
  button.text-white.rounded-lg.font-medium.bg-default-button:active,
  button.bg-default-button.text-white:active {
    background-color: var(--brand-active) !important;
  }
  
  button.text-white.rounded-lg.font-medium.bg-default-button:focus-visible,
  button.bg-default-button.text-white:focus-visible {
    outline: 2px solid var(--gray-700);
    outline-offset: 3px;
  }
  
  /* --- Header / chrome --- */
  .layout-header.full-width-header {
    border-bottom: 1px solid var(--gray-200);
  }
  
  .full-width-header .header h1,
  .full-width-header .header {
    color: var(--gray-900) !important;
    font-family: "Filson Pro Bold", "Proxima Nova", sans-serif;
    font-weight: 700;
  }
  
  /* Section dividers */
  .border-neutral-400 {
    border-color: var(--gray-400) !important;
  }
  
  /* Category disclosure */
  details.category-section summary {
    font-family: "Proxima Nova", sans-serif;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--gray-700);
  }
  
  details.category-section summary:hover {
    color: var(--brand);
  }
  
  /* Location / modality pills — keep structure, nudge toward site neutrals */
  .bg-neutral-300.text-neutral-600 {
    background-color: var(--gray-200) !important;
    color: var(--gray-500) !important;
  }
  
  /* Date picker selected day — align accent with main site pink */
  .flatpickr-day.selected,
  .flatpickr-day.startRange,
  .flatpickr-day.endRange {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: var(--white) !important;
  }
  
  .flatpickr-day.selected:hover,
  .flatpickr-day.startRange:hover,
  .flatpickr-day.endRange:hover {
    background: var(--brand-hover) !important;
    border-color: var(--brand-hover) !important;
  }