/**
 * CLEARCOMPANY CAREERS WIDGET - Custom Styles
 *
 * Overrides ClearCompany's default widget styles to match
 * the Nwestco design system (typography, colors, spacing, forms, buttons).
 *
 * Since ClearCompany injects its own CSS, !important is required
 * on all overrides to ensure our styles win.
 *
 * Widget structure reference:
 *   .cc-careers-container
 *     .cc-insights-container       (intro heading + description)
 *     .cc-filters-container        (search form: keyword + office + buttons)
 *     .cc-portal-share-container   (job portal link + social share icons)
 *     .cc-jobs-container           (job listing rows + pagination)
 *     .cc-skeleton-container       (loading skeleton)
 */


/* ============================================================
   WIDGET CONTAINER
   ============================================================ */

#clearcompany-careers {
  font-family: var(--font-secondary) !important;
  color: var(--nwestco-neutral-700) !important;
  line-height: var(--leading-normal) !important;
}

#clearcompany-careers .cc-careers-container,
#clearcompany-careers .cc-job-description-container {
  background: var(--nwestco-white) !important;
  font-family: var(--font-secondary) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 2rem !important;
}


/* ============================================================
   INTRO SECTION — "Join a growing team!"
   ============================================================ */

#clearcompany-careers .cc-insights-container {
  margin-bottom: 0 !important;
  padding-bottom: 1.5rem !important;
  border-bottom: 1px solid var(--nwestco-neutral-100) !important;
}

#clearcompany-careers .cc-custom-section-container {
  padding: 0 !important;
  margin: 0 !important;
}

#clearcompany-careers .cc-careers-container .cc-widget-container {
  border: 0 !important;
}

#clearcompany-careers .cc-custom-section-title,
#clearcompany-careers .cc-widget-title {
  display: block !important;
  font-family: var(--font-primary) !important;
  font-size: var(--text-2xl) !important;
  font-weight: var(--font-bold) !important;
  color: var(--nwestco-blue) !important;
  margin-bottom: 0.5rem !important;
  letter-spacing: var(--tracking-tight) !important;
  line-height: var(--leading-tight) !important;
}

#clearcompany-careers .cc-custom-section-content {
  font-family: var(--font-secondary) !important;
  font-size: var(--text-base) !important;
  font-weight: var(--font-normal) !important;
  color: var(--nwestco-neutral-600) !important;
  line-height: var(--leading-relaxed) !important;
}


/* ============================================================
   SEARCH / FILTER FORM
   ============================================================ */

#clearcompany-careers .cc-filters-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important;
  align-items: flex-end !important;
  margin-bottom: 1.5rem !important;
  padding: 1.25rem !important;
  background: var(--nwestco-neutral-50) !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--nwestco-neutral-100) !important;
}

/* Keyword input wrapper */
#clearcompany-careers .cc-keywords-wrapper {
  flex: 1 1 280px !important;
}

/* Text input */
#clearcompany-careers .cc-filter-keywords {
  display: block !important;
  width: 100% !important;
  font-family: var(--font-secondary) !important;
  font-size: var(--text-base) !important;
  font-weight: var(--font-normal) !important;
  color: var(--nwestco-neutral-900) !important;
  background-color: var(--nwestco-white) !important;
  border: 1px solid var(--nwestco-neutral-300) !important;
  border-radius: var(--radius-base) !important;
  padding: 0.75rem 1rem !important;
  box-shadow: var(--shadow-xs) !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
  line-height: var(--leading-normal) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
}

#clearcompany-careers .cc-filter-keywords::placeholder {
  color: var(--nwestco-neutral-400) !important;
  opacity: 1 !important;
}

#clearcompany-careers .cc-filter-keywords:focus {
  outline: none !important;
  border-color: var(--nwestco-blue) !important;
  box-shadow: var(--shadow-focus) !important;
}

#clearcompany-careers .cc-filter-keywords:hover:not(:focus) {
  border-color: var(--nwestco-neutral-400) !important;
}

/* Filter group (dropdown + buttons) */
#clearcompany-careers .cc-filter-group {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important;
  align-items: center !important;
  flex: 1 1 auto !important;
}

/* Native select dropdown */
#clearcompany-careers select.cc-filter-dropdown {
  font-family: var(--font-secondary) !important;
  font-size: var(--text-base) !important;
  font-weight: var(--font-normal) !important;
  color: var(--nwestco-neutral-900) !important;
  background-color: var(--nwestco-white) !important;
  border: 1px solid var(--nwestco-neutral-300) !important;
  border-radius: var(--radius-base) !important;
  padding: 0.75rem 2.5rem 0.75rem 1rem !important;
  box-shadow: var(--shadow-xs) !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
  cursor: pointer !important;
  min-width: 160px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23626262' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 12px !important;
  box-sizing: border-box !important;
}

#clearcompany-careers select.cc-filter-dropdown:focus {
  outline: none !important;
  border-color: var(--nwestco-blue) !important;
  box-shadow: var(--shadow-focus) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2325617C' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
}

#clearcompany-careers select.cc-filter-dropdown:hover:not(:focus) {
  border-color: var(--nwestco-neutral-400) !important;
}

/* Custom select dropdown (CC's custom div-based dropdown) */
#clearcompany-careers div.cc-filter-dropdown.custom {
  font-family: var(--font-secondary) !important;
  font-size: var(--text-base) !important;
  color: var(--nwestco-neutral-900) !important;
  background-color: var(--nwestco-white) !important;
  border: 1px solid var(--nwestco-neutral-300) !important;
  border-radius: var(--radius-base) !important;
  box-shadow: var(--shadow-xs) !important;
  min-width: 160px !important;
  position: relative !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

#clearcompany-careers div.cc-filter-dropdown.custom:hover {
  border-color: var(--nwestco-neutral-400) !important;
}

#clearcompany-careers div.cc-filter-dropdown.custom:focus {
  outline: none !important;
  border-color: var(--nwestco-blue) !important;
  box-shadow: var(--shadow-focus) !important;
}

#clearcompany-careers .cc-custom-select-trigger {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
  padding: 0.75rem 1rem !important;
  white-space: nowrap !important;
}

#clearcompany-careers .cc-custom-span {
  color: var(--nwestco-neutral-700) !important;
  font-family: var(--font-secondary) !important;
  font-size: var(--text-base) !important;
}

#clearcompany-careers .cc-custom-trigger-arrow {
  color: var(--nwestco-neutral-500) !important;
  font-size: 0.875rem !important;
  line-height: 1 !important;
}

/* Dropdown options list */
#clearcompany-careers .cc-custom-select-options {
  position: absolute !important;
  top: 100% !important;
  left: -1px !important;
  right: -1px !important;
  z-index: 100 !important;
  background: var(--nwestco-white) !important;
  border: 1px solid var(--nwestco-neutral-200) !important;
  border-top: none !important;
  border-radius: 0 0 var(--radius-base) var(--radius-base) !important;
  box-shadow: var(--shadow-lg) !important;
  max-height: 260px !important;
  overflow-y: auto !important;
}

#clearcompany-careers .cc-custom-option {
  padding: 0.625rem 1rem !important;
  font-family: var(--font-secondary) !important;
  font-size: var(--text-sm) !important;
  color: var(--nwestco-neutral-700) !important;
  cursor: pointer !important;
  transition: background-color var(--transition-fast), color var(--transition-fast) !important;
}

#clearcompany-careers .cc-custom-option:hover,
#clearcompany-careers .cc-custom-option.isHover {
  background-color: var(--nwestco-blue-pale) !important;
  color: var(--nwestco-blue) !important;
}

#clearcompany-careers .cc-custom-option.isActive {
  background-color: var(--nwestco-blue) !important;
  color: var(--nwestco-white) !important;
  font-weight: var(--font-semibold) !important;
}

#clearcompany-careers .cc-custom-option.isActive:hover,
#clearcompany-careers .cc-custom-option.isActive.isHover {
  background-color: var(--nwestco-blue-dark) !important;
  color: var(--nwestco-white) !important;
}

#clearcompany-careers .cc-option-parent {
  font-weight: var(--font-semibold) !important;
}


/* ============================================================
   SEARCH / RESET BUTTONS
   ============================================================ */

#clearcompany-careers .cc-search-button-container {
  display: flex !important;
  gap: 0.5rem !important;
  align-items: center !important;
}

#clearcompany-careers .cc-submit-search-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-primary) !important;
  font-size: var(--text-base) !important;
  font-weight: var(--font-semibold) !important;
  color: var(--nwestco-white) !important;
  background-color: var(--nwestco-blue) !important;
  border: 2px solid var(--nwestco-blue) !important;
  border-radius: var(--radius-base) !important;
  padding: 0.625rem 1.5rem !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: var(--leading-normal) !important;
  transition: all var(--transition-fast) !important;
}

#clearcompany-careers .cc-submit-search-button:hover {
  background-color: var(--nwestco-blue-dark) !important;
  border-color: var(--nwestco-blue-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-md) !important;
  color: var(--nwestco-white) !important;
}

#clearcompany-careers .cc-submit-search-button:active {
  background-color: var(--nwestco-blue-darker) !important;
  border-color: var(--nwestco-blue-darker) !important;
  transform: translateY(0) !important;
}

#clearcompany-careers .cc-reset-search-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-primary) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--font-semibold) !important;
  color: var(--nwestco-neutral-500) !important;
  background-color: transparent !important;
  border: 1px solid var(--nwestco-neutral-200) !important;
  border-radius: var(--radius-base) !important;
  padding: 0.625rem 1rem !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  transition: all var(--transition-fast) !important;
}

#clearcompany-careers .cc-reset-search-button:hover {
  color: var(--nwestco-neutral-700) !important;
  border-color: var(--nwestco-neutral-400) !important;
  background-color: var(--nwestco-neutral-50) !important;
}


/* ============================================================
   PORTAL LINK & SOCIAL SHARE BAR
   ============================================================ */

#clearcompany-careers .cc-portal-share-container {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 1rem !important;
  padding: 0.75rem 0 !important;
  margin-bottom: 1rem !important;
  border-bottom: 1px solid var(--nwestco-neutral-100) !important;
}

/* "Applied to a job? Go to our portal" link */
#clearcompany-careers .cc-job-portal-container {
  flex: 1 1 auto !important;
}

#clearcompany-careers .cc-job-portal-link-text {
  font-family: var(--font-secondary) !important;
  font-size: var(--text-sm) !important;
  color: var(--nwestco-neutral-500) !important;
  line-height: var(--leading-normal) !important;
}

#clearcompany-careers .cc-job-portal-link {
  color: var(--nwestco-green) !important;
  font-weight: var(--font-semibold) !important;
  text-decoration: none !important;
  transition: color var(--transition-fast) !important;
}

#clearcompany-careers .cc-job-portal-link:hover {
  color: var(--nwestco-green-dark) !important;
  text-decoration: underline !important;
}

/* Share section */
#clearcompany-careers .cc-share-container {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex-shrink: 0 !important;
}

#clearcompany-careers .cc-share-header-text {
  font-family: var(--font-primary) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--font-semibold) !important;
  color: var(--nwestco-neutral-500) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--tracking-wider) !important;
}

#clearcompany-careers .cc-share-link,
#clearcompany-careers .cc-copy-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: var(--radius-base) !important;
  background: transparent !important;
  border: 1px solid var(--nwestco-neutral-200) !important;
  transition: all var(--transition-fast) !important;
  cursor: pointer !important;
  padding: 0 !important;
}

#clearcompany-careers .cc-share-link:hover,
#clearcompany-careers .cc-copy-btn:hover {
  background: var(--nwestco-blue-pale) !important;
  border-color: var(--nwestco-blue-light) !important;
}

#clearcompany-careers .cc-share-logo {
  width: 16px !important;
  height: 16px !important;
  opacity: 0.6 !important;
  transition: opacity var(--transition-fast) !important;
}

#clearcompany-careers .cc-share-link:hover .cc-share-logo,
#clearcompany-careers .cc-copy-btn:hover .cc-share-logo {
  opacity: 1 !important;
}

#clearcompany-careers .copied-message {
  font-family: var(--font-secondary) !important;
  font-size: var(--text-xs) !important;
  color: var(--nwestco-green) !important;
  font-weight: var(--font-semibold) !important;
  margin-left: 0.25rem !important;
}


/* ============================================================
   JOB LISTINGS
   ============================================================ */

#clearcompany-careers .cc-jobs-container {
  padding: 0 !important;
}

#clearcompany-careers .cc-job-container {
  display: block !important;
  padding: 1rem 1.25rem !important;
  border-bottom: 1px solid var(--nwestco-neutral-100) !important;
  transition: background-color var(--transition-fast) !important;
}

#clearcompany-careers .cc-job-container:first-child {
  border-top: 1px solid var(--nwestco-neutral-100) !important;
}

#clearcompany-careers .cc-job-container:hover {
  background-color: var(--nwestco-blue-tint) !important;
}

/* Job title link */
#clearcompany-careers .cc-job-title {
  display: block !important;
  font-family: var(--font-primary) !important;
  font-size: var(--text-lg) !important;
  font-weight: var(--font-bold) !important;
  color: var(--nwestco-blue) !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: var(--leading-snug) !important;
  transition: color var(--transition-fast) !important;
  margin-bottom: 0.25rem !important;
}

#clearcompany-careers .cc-job-title:hover {
  color: var(--nwestco-green) !important;
  text-decoration: underline !important;
}

/* Location label */
#clearcompany-careers .cc-secondary-label {
  display: block !important;
}

#clearcompany-careers .cc-location-label {
  font-family: var(--font-secondary) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--font-normal) !important;
  color: var(--nwestco-neutral-500) !important;
  line-height: var(--leading-normal) !important;
}


#clearcompany-careers .cc-job-description-container .cc-apply-button {
  color: var(--nwestco-white) !important;
  background: var(--nwestco-blue) !important;
  font-weight: var(--font-semibold);
  line-height: var(--leading-normal);
  padding: var(--button-padding-y-lg) var(--button-padding-x-sm);
}

#clearcompany-careers .cc-job-description-container .cc-back-to-jobs-button.cc-clickable {
  padding: var(--button-padding-y-sm) var(--button-padding-x-sm);
  border: 1px solid var(--nwestco-neutral-200) !important;
  border-radius: 4px;
}
#clearcompany-careers .cc-job-description-container .cc-back-to-jobs-button.cc-clickable img {
  display: inline-block !important;
}


/* ============================================================
   PAGINATION
   ============================================================ */

#clearcompany-careers .cc-page-controls {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.375rem !important;
  padding: 1.5rem 0 0.5rem !important;
}

#clearcompany-careers .cc-page-control {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 36px !important;
  height: 36px !important;
  font-family: var(--font-secondary) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--font-semibold) !important;
  color: var(--nwestco-neutral-600) !important;
  background: var(--nwestco-white) !important;
  border: 1px solid var(--nwestco-neutral-200) !important;
  border-radius: var(--radius-base) !important;
  cursor: pointer !important;
  padding: 0 0.5rem !important;
  transition: all var(--transition-fast) !important;
  text-decoration: none !important;
}

#clearcompany-careers .cc-page-control:hover {
  background: var(--nwestco-blue-pale) !important;
  border-color: var(--nwestco-blue-light) !important;
  color: var(--nwestco-blue) !important;
}

#clearcompany-careers .cc-page-control.cc-current-page {
  background: var(--nwestco-blue) !important;
  border-color: var(--nwestco-blue) !important;
  color: var(--nwestco-white) !important;
  cursor: default !important;
}

#clearcompany-careers .cc-page-control.cc-current-page:hover {
  background: var(--nwestco-blue) !important;
  border-color: var(--nwestco-blue) !important;
  color: var(--nwestco-white) !important;
}

/* Next/prev arrow controls */
#clearcompany-careers .cc-right-control {
  font-weight: var(--font-bold) !important;
}


/* ============================================================
   SKELETON / LOADING STATE
   ============================================================ */

#clearcompany-careers .cc-skeleton-container {
  padding: 1rem 0 !important;
}

#clearcompany-careers .cc-skeleton {
  background: linear-gradient(90deg,
    var(--nwestco-neutral-100) 25%,
    var(--nwestco-neutral-50) 50%,
    var(--nwestco-neutral-100) 75%) !important;
  background-size: 200% 100% !important;
  animation: cc-skeleton-shimmer 1.5s ease-in-out infinite !important;
  border-radius: var(--radius-base) !important;
  min-height: 20px !important;
}

#clearcompany-careers .cc-skeleton.filter {
  height: 48px !important;
  margin-bottom: 1rem !important;
}

#clearcompany-careers .cc-skeleton.job {
  height: 52px !important;
  margin-bottom: 0.5rem !important;
}

@keyframes cc-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}


/* ============================================================
   GENERIC OVERRIDES — Catch-alls
   Ensure all text within the widget uses our fonts and colors,
   overriding any ClearCompany defaults we may have missed.
   ============================================================ */

#clearcompany-careers div,
#clearcompany-careers span,
#clearcompany-careers p {
  font-family: var(--font-secondary) !important;
  color: var(--nwestco-neutral-700) !important;
  line-height: var(--leading-normal) !important;
}

#clearcompany-careers h1,
#clearcompany-careers h2,
#clearcompany-careers h3,
#clearcompany-careers h4 {
  font-family: var(--font-primary) !important;
  color: var(--nwestco-blue) !important;
  font-weight: var(--font-bold) !important;
}

#clearcompany-careers a {
  color: var(--nwestco-green) !important;
  transition: color var(--transition-fast) !important;
}

#clearcompany-careers a:hover {
  color: var(--nwestco-green-dark) !important;
}

/* Re-enforce button text stays white (overrides the generic catch-all above) */
#clearcompany-careers button,
#clearcompany-careers .cc-submit-search-button,
#clearcompany-careers .cc-page-control {
  color: var(--nwestco-white) !important;
}

#clearcompany-careers .cc-reset-search-button {
  color: var(--nwestco-neutral-500) !important;
}

#clearcompany-careers .cc-page-control:not(.cc-current-page) {
  color: var(--nwestco-neutral-600) !important;
}


/* ============================================================
   RESPONSIVE — Mobile
   ============================================================ */

@media (max-width: 768px) {
  #clearcompany-careers .cc-careers-container {
    padding: 1.25rem !important;
  }

  #clearcompany-careers .cc-filters-container {
    flex-direction: row !important;
    padding: 1rem !important;
  }

  #clearcompany-careers .cc-keywords-wrapper {
    flex: 1 1 100% !important;
  }

  #clearcompany-careers .cc-filter-group {
    flex: 1 1 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #clearcompany-careers select.cc-filter-dropdown,
  #clearcompany-careers div.cc-filter-dropdown.custom {
    width: 100% !important;
    min-width: unset !important;
  }

  #clearcompany-careers .cc-search-button-container {
    width: 100% !important;
    flex-direction: column !important;
  }

  #clearcompany-careers .cc-submit-search-button,
  #clearcompany-careers .cc-reset-search-button {
    width: 100% !important;
  }

  #clearcompany-careers .cc-portal-share-container {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }

  #clearcompany-careers .cc-job-container {
    padding: 0.875rem 1rem !important;
  }

  #clearcompany-careers .cc-job-title {
    font-size: var(--text-base) !important;
  }

  /* Prevent iOS zoom on input focus */
  #clearcompany-careers .cc-filter-keywords,
  #clearcompany-careers select.cc-filter-dropdown {
    font-size: 16px !important;
  }
}

@media (max-width: 480px) {
  #clearcompany-careers {
    padding: 0rem !important;
  }

  #clearcompany-careers .cc-careers-container,
  #clearcompany-careers .cc-job-description-container {
    padding: 1.25rem !important;
  }

  #clearcompany-careers .cc-job-description-text ul {
    padding-left: 1rem !important;
  }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */

/* Focus visible for keyboard navigation */
#clearcompany-careers .cc-clickable:focus-visible {
  outline: 2px solid var(--nwestco-blue) !important;
  outline-offset: 2px !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #clearcompany-careers .cc-job-container,
  #clearcompany-careers .cc-submit-search-button,
  #clearcompany-careers .cc-page-control,
  #clearcompany-careers .cc-share-link,
  #clearcompany-careers .cc-copy-btn,
  #clearcompany-careers .cc-skeleton {
    transition: none !important;
    animation: none !important;
  }

  #clearcompany-careers .cc-submit-search-button:hover {
    transform: none !important;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  #clearcompany-careers .cc-filter-keywords,
  #clearcompany-careers select.cc-filter-dropdown,
  #clearcompany-careers div.cc-filter-dropdown.custom {
    border-width: 2px !important;
  }

  #clearcompany-careers .cc-job-container {
    border-bottom-width: 2px !important;
  }
}