/* Fonts. They come from Google Fonts (SIL Open Font License, see static/fonts/OFL-*.txt) and the site
   serves them itself. Only the latin letters are here, which cover Spanish; another letter shows in the
   fallback font. Only the weights that the pages use are here: League Gothic 400, League Spartan 700-800,
   Montserrat 400-700 and Poppins 500-700. League Spartan and Montserrat are variable fonts, so one file
   holds every weight. */

@font-face {
  font-family: 'League Gothic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/league-gothic-latin.50af387a6cef.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'League Spartan';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/league-spartan-latin.0a37cd9b7365.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/montserrat-latin.311d352d9323.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins-500-latin.a09f2fccfee3.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-600-latin.72993dddf88a.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins-700-latin.25b0e113ca7c.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.rs-tag {
  display: inline-flex;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  background-color: #f0e8ff;
  color: #6633aa;
}

.rs-tag-location-type { background-color: #f0e8ff; color: #6633aa; }

/* Offer facts on a list card: a strip under a hairline. Each fact is a small uppercase label over
   its value, so a person sees what a value is at a glance. Each fact is as wide as its value and
   the strip wraps, so cards stay short on a phone. There are no coloured boxes; the title stays
   the loudest thing on the card. Each kind of fact has its own colour, the same ones the pills
   had, on its label and on the thin bar at its left edge. The value stays dark. */
.rs-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem 2rem;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(43, 33, 29, 0.12);
}

/* Without the line above the strip, for when the page already draws its own line. */
.rs-meta-flush {
  padding-top: 0;
  border-top: 0;
}

.rs-meta > div {
  max-width: 100%;
  padding-left: 0.625rem;
  border-left: 2px solid var(--fact-color, rgba(43, 33, 29, 0.25));
}

.rs-meta dt {
  margin-bottom: 0.125rem;
  font-family: 'Poppins', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fact-color, rgba(43, 33, 29, 0.65));
}

.rs-meta dd {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
  color: #2b211d;
}

.rs-fact-category { --fact-color: #12695f; }
.rs-fact-contract-type { --fact-color: #666666; }
.rs-fact-location-type { --fact-color: #6633aa; }
.rs-fact-location { --fact-color: #3a6a1a; }
.rs-fact-experience { --fact-color: #3355aa; }
.rs-fact-salary { --fact-color: #8a6010; }
.rs-fact-language { --fact-color: #666666; }

/* One entry of a list inside a fact (a language). The comma and space come from CSS so that no template
   formatter can move it away from the text. */
.rs-meta-item:not(:last-child)::after {
  content: ", ";
}

/* White card with round corners and a soft, warm shadow. */
.rs-card {
  background-color: #fdfdf9;
  border: 1px solid rgba(43, 33, 29, 0.4);
  border-radius: 1.5rem;
  box-shadow: 0 2px 4px rgba(43, 33, 29, 0.06), 0 10px 30px rgba(43, 33, 29, 0.08);
}

/* Round company avatar in a soft tint of one of the three brand colours (see Company.avatar_color). */
.rs-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #2b211d;
}

.rs-avatar-green { background-color: #def5ce; border: 1px solid #c4ebaa; }
.rs-avatar-yellow { background-color: #fef0af; border: 1px solid #fadf6e; }
.rs-avatar-coral { background-color: #f8dad4; border: 1px solid #f1b8b0; }

/* Page title area: a light band with two soft glows (green left, yellow right). */
.rs-hero {
  position: relative;
  overflow: hidden;
}

.rs-hero::before,
.rs-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.rs-hero::before {
  width: 400px;
  height: 400px;
  left: -140px;
  top: -200px;
  background: radial-gradient(circle, rgba(190, 237, 159, 0.75), transparent 68%);
}

.rs-hero::after {
  width: 380px;
  height: 380px;
  right: -100px;
  top: -190px;
  background: radial-gradient(circle, rgba(255, 211, 1, 0.32), transparent 68%);
}

/* The search box at the top of the home: a white pill with the card border and shadow. The blue
   focus ring goes around the whole pill, not around the text field inside it. */
.rs-search {
  background-color: #fdfdf9;
  border: 1px solid rgba(43, 33, 29, 0.4);
  box-shadow: 0 2px 4px rgba(43, 33, 29, 0.06), 0 10px 30px rgba(43, 33, 29, 0.08);
}

.rs-search input:focus { outline: none; }

.rs-search:focus-within { outline: 3px solid #5252ff; outline-offset: 2px; }

a, button { transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; }

/* Focus ring: strong blue, so keyboard users can always see where they are. */
input:focus, select:focus, a:focus-visible, button:focus-visible {
  outline: 3px solid #5252ff;
  outline-offset: 2px;
}

/* Job description copy: give each paragraph breathing room instead of a dense block. */
.rs-prose p {
  margin-bottom: 1rem;
}

.rs-prose p:last-child {
  margin-bottom: 0;
}

/* While htmx loads a new result, the results look faded, and the link that adds more offers looks
   busy. The delay stops a fast answer from making the page flash. */
#job-results.htmx-request {
  opacity: 0.5;
  transition: opacity 150ms ease 200ms;
}

#more-offers-link.htmx-request {
  opacity: 0.6;
  cursor: progress;
}


/* The salary slider: two range inputs one on top of the other, over one track. The inputs ignore the
   pointer and only their handles take it, so both handles can be moved. --from and --to are the places
   of the handles, from 0 (the left end) to 1 (the right end), and the script of the page sets them. */
.rs-range {
  --from: 0;
  --to: 1;
  --handle: 1.25rem;
  position: relative;
  height: 1.75rem;
}

.rs-range-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 0.375rem;
  margin-top: -0.1875rem;
  border-radius: 9999px;
  background-color: #d8edbb;
}

.rs-range-track::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--handle) / 2 + (100% - var(--handle)) * var(--from));
  right: calc(var(--handle) / 2 + (100% - var(--handle)) * (1 - var(--to)));
  border-radius: 9999px;
  background-color: #15803d;
}

.rs-range input[type="range"] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.rs-range input[type="range"]::-webkit-slider-runnable-track { background: transparent; }
.rs-range input[type="range"]::-moz-range-track { background: transparent; }

.rs-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: var(--handle);
  height: var(--handle);
  border: 2px solid #2b211d;
  border-radius: 9999px;
  background-color: #ffffff;
  pointer-events: auto;
  cursor: grab;
}

.rs-range input[type="range"]::-moz-range-thumb {
  box-sizing: border-box;
  width: var(--handle);
  height: var(--handle);
  border: 2px solid #2b211d;
  border-radius: 9999px;
  background-color: #ffffff;
  pointer-events: auto;
  cursor: grab;
}

.rs-range input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 3px solid #5252ff; outline-offset: 2px; }
.rs-range input[type="range"]:focus-visible::-moz-range-thumb { outline: 3px solid #5252ff; outline-offset: 2px; }