/*
 * Brand overrides for the ClearCompany career-site widget.
 *
 * The widget scopes its theme variables with :where(.cc-careers-script-container),
 * so setting them on the embed container (id selector) wins without !important.
 * The explicit .cc-* rules below are ported from www.laseraway.com/careers so the
 * internal board matches the public one.
 */

/* Palette variables: declared once on the container and inherited. */
#careers-widget {
  --ccw-dark-blue: var(--la-pink);
  --ccw-medium-blue: var(--la-pink);
  --ccw-hover-blue: var(--la-pink);
  --ccw-light-blue: var(--la-blush-wash);
  --ccw-blue-100: var(--la-blush-wash);
  --ccw-blue-200: var(--la-blush-wash);
  --ccw-navy: var(--la-charcoal);
  --ccw-navy-hover: var(--la-pink);
  --ccw-text-only-button-color: var(--la-charcoal);
  --ccw-gray-border: var(--la-rule);

  min-height: 24rem;
  /* Keep wide widget content (long words, tables in job descriptions) from scrolling the
     page sideways. The 0.75rem padding/negative-margin pair leaves the layout unchanged
     but gives focus outlines and shadows at the edges room to paint inside the clip.
     clip, not hidden: only the x axis is contained, so the filter dropdown menus can
     still extend below the widget. */
  padding: 0 0.75rem;
  margin: 0 -0.75rem;
  overflow-x: clip;
}

/* Semantic variables: the widget resets these to `initial` on every descendant
   (:where(.cc-careers-script-container *)), so they must be set on descendants too. */
#careers-widget,
#careers-widget * {
  --ccw-brand: var(--la-pink);
  --ccw-focus-ring: var(--la-pink);
  --ccw-filter-panel-bg: var(--la-blush-wash);
  --ccw-border-color: var(--la-rule);
  --ccw-radius: 16px;
  --ccw-heading-font: var(--font-outfit);
  --ccw-heading-color: var(--la-charcoal);
  --ccw-body-font: var(--font-outfit);
  --ccw-body-color: var(--la-charcoal);
  --ccw-link-color: var(--la-pink);
  --ccw-muted-text: var(--la-slate);
  --ccw-btn-fill: var(--la-pink);
  --ccw-btn-ink: var(--la-white);
  --ccw-btn-radius: 3.125rem;
  --ccw-btn-weight: 600;
  --ccw-btn-hover-fill: var(--la-pink);
  --ccw-btn-hover-shadow: 0 15px 40px 0 rgba(241, 107, 162, 0.5);
  --ccw-btn-soft-fill: var(--la-blush-wash);
  --ccw-tag-bg: var(--la-blush-wash);
  --ccw-tag-ink: var(--la-charcoal);
}

.cc-job-description-text ul {
  list-style-type: disc;
  margin: 10px 0 20px 40px;
}

.cc-job-description-text li {
  margin-bottom: 10px;
}

.cc-job-description-text p {
  margin-bottom: 10px;
}

.cc-careers-container {
  width: 100%;
}

.cc-filters-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.5rem;
  border-radius: 1.5rem;
}

@media (min-width: 768px) {
  .cc-filters-container {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
  }
}

.cc-keywords-wrapper {
  flex: 1;
  min-width: 100%;
}

@media (min-width: 768px) {
  .cc-keywords-wrapper {
    min-width: auto;
  }
}

.cc-filter-keywords {
  width: 100%;
  padding: 1rem 1.25rem;
  border: 1px solid var(--la-rule);
  border-radius: 1rem;
  font-family: var(--font-outfit);
  font-size: 1rem;
  line-height: 1.3;
  color: var(--la-slate);
  background-color: rgba(85, 88, 90, 0.08);
}

.cc-filter-keywords:focus {
  outline: none;
  border-color: var(--la-pink);
}

/* The pink border alone is too faint for keyboard users. Scoped to the container id
   because ClearCompany's own focus rules (e.g. .cc-filters-container .cc-keywords-wrapper
   .cc-filter-keywords:focus) would otherwise win; its pink focus ring is dropped so the
   outline is the only indicator. */
#careers-widget .cc-filter-keywords:focus-visible {
  outline: 2px solid var(--la-charcoal);
  outline-offset: 2px;
  box-shadow: none;
}

.cc-filter-group {
  flex: 1;
  min-width: calc(50% - 0.5rem);
}

@media (min-width: 768px) {
  .cc-filter-group {
    min-width: auto;
  }
}

.cc-filter-dropdown {
  width: 100%;
  padding: 1rem 1.5rem;
  border: 1px solid var(--la-rule);
  border-radius: 1rem;
  font-family: var(--font-outfit);
  font-size: 1rem;
  line-height: 1.3;
  color: var(--la-slate);
  background-color: var(--la-white);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='11' height='7' viewBox='0 0 11 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.39712 0.000105318C5.17513 0.007882 4.96376 0.0962528 4.80328 0.248958L0.278694 4.59256C0.105488 4.75941 0.00510161 4.98776 0.000142662 5.22812C-0.00409923 5.46849 0.0863924 5.70109 0.25323 5.87429C0.419368 6.04749 0.648426 6.14717 0.888084 6.15213C1.12845 6.15708 1.36105 6.06588 1.53425 5.89905L5.431 2.16137L9.32776 5.89977C9.68832 6.24619 10.2624 6.23488 10.6088 5.87432C10.9552 5.51306 10.9439 4.9397 10.5833 4.5933L6.05874 0.249696C5.88129 0.0800236 5.64234 -0.00976228 5.39703 0.000843352L5.39712 0.000105318Z' fill='%2355585a'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.5rem center;
  background-size: 0.6875rem 0.4375rem;
  padding-right: 3rem;
}

.cc-filter-dropdown:focus {
  outline: none;
  border-color: var(--la-pink);
}

/* The pink border alone is too faint for keyboard users. Scoped to the container id
   because ClearCompany's own focus rules (e.g. .cc-filters-container .cc-keywords-wrapper
   .cc-filter-keywords:focus) would otherwise win; its pink focus ring is dropped so the
   outline is the only indicator. */
#careers-widget .cc-filter-dropdown:focus-visible {
  outline: 2px solid var(--la-charcoal);
  outline-offset: 2px;
  box-shadow: none;
}

.cc-search-button-container {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.cc-submit-search-button,
.cc-reset-search-button {
  padding: 1rem 2rem;
  border-radius: 3.125rem;
  font-family: var(--font-outfit);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

.cc-submit-search-button,
.cc-apply-button {
  background: var(--la-gradient);
  color: var(--la-white);
  box-shadow: var(--la-shadow-pink);
}

.cc-submit-search-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px 0 rgba(241, 107, 162, 0.5);
}

.cc-apply-button {
  min-height: 3rem;
  padding: 0.875rem 2rem;
  border-radius: 3.125rem;
  font-family: var(--font-outfit);
  font-size: 1rem;
  text-transform: none;
}

.cc-reset-search-button {
  background: transparent;
  color: var(--la-charcoal);
  text-decoration: underline;
  padding: 0;
}

.cc-reset-search-button:hover,
.cc-back-to-jobs-button:hover,
.cc-refer-button:hover {
  color: var(--la-pink);
}

.cc-back-to-jobs-button,
.cc-refer-button {
  font-family: var(--font-outfit);
  color: var(--la-charcoal);
}

.cc-jobs-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cc-job-container {
  margin-bottom: 0;
}

.cc-job-card {
  border: 1px solid var(--la-rule);
  border-radius: 1rem;
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.cc-job-card:hover {
  border-color: var(--la-pink);
  box-shadow: 0 4px 12px rgba(241, 107, 162, 0.1);
}

.cc-job-title {
  font-family: var(--font-outfit);
  font-size: 1.5625rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--la-pink);
  text-decoration: none;
  display: block;
  margin-bottom: 0.5rem;
}

.cc-job-title:hover {
  text-decoration: underline;
}

.cc-job-description-title {
  font-family: var(--font-outfit);
  font-weight: 400;
  color: var(--la-charcoal);
}

.cc-secondary-label {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .cc-secondary-label {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }
}

.cc-location-label {
  font-family: var(--font-playfair-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.16rem;
  text-transform: uppercase;
  color: var(--la-charcoal);
}

.cc-date-label {
  font-family: var(--font-outfit);
  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--la-slate);
}

.cc-page-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 2.5rem;
}

.cc-page-control {
  padding: 0.5rem 1rem;
  border: 1px solid var(--la-rule);
  border-radius: 0.5rem;
  background: var(--la-white);
  color: var(--la-charcoal);
  cursor: pointer;
  font-family: var(--font-outfit);
  font-size: 1rem;
}

.cc-page-control:hover {
  border-color: var(--la-pink);
  color: var(--la-pink);
}

.cc-page-control.cc-current-page {
  background: var(--la-pink);
  color: var(--la-white);
  border-color: var(--la-pink);
}

.cc-portal-share-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--la-rule);
}

@media (min-width: 768px) {
  .cc-portal-share-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.cc-job-portal-link-text {
  font-family: var(--font-outfit);
  font-size: 1rem;
  line-height: 1.3;
  color: var(--la-slate);
}

.cc-job-portal-link {
  color: var(--la-charcoal);
  text-decoration: underline;
}

.cc-job-portal-link:hover {
  color: var(--la-pink);
}

.cc-share-container {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.cc-share-header-text {
  font-family: var(--font-outfit);
  font-size: 1rem;
  font-weight: 600;
  color: var(--la-charcoal);
}

.cc-share-link,
.cc-copy-btn {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.cc-share-link:hover,
.cc-copy-btn:hover {
  opacity: 0.7;
}

.cc-share-logo {
  width: 100%;
  height: 100%;
}

.cc-hidden {
  display: none;
}

.copied-message {
  position: absolute;
  background: var(--la-charcoal);
  color: var(--la-white);
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  margin-left: 2.5rem;
}