/* ------------------------------------------------------------------
   Careers section styling – place this file after your global CSS.
------------------------------------------------------------------ */

/* Section container */
#careers-section {
  background: #F9F9F9;
  padding: 50px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Intro block */
#careers-section .intro {
  border-bottom: 1px solid #C1C7E5;
  padding-top: 100px;
  padding-bottom: 40px;
}
#careers-section .now-hiring {
  font-family: Urbanist, sans-serif;
  color: #071F95;
  border: 2px solid;
  padding: 8px 16px;

}

#careers-section .title {
  font-family: Urbanist, sans-serif;
  color: #071F95;
  padding-bottom: 40px;

}
#careers-section .now-hiring { 
  display: inline-block;
  text-align: left; 
  font-size: 20px;
  font-weight: 700;
}
#careers-section .title { 
  font-size: 60px; 
  line-height: 63px; 
  font-weight: 700; 
  margin-top: 20px;
}
#careers-section .description {
  color: #071F95;
  font-family: Urbanist, sans-serif;
  font-size: 16px;
  line-height: 24px;
  margin-top: 20px;
}

/* Job opening */
#careers-section .job {
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding-top: 40px;
}
#careers-section .role-title {
  color: #071F95;
  font-family: Urbanist, sans-serif;
  font-size: 24px;
  font-weight: 700;
}
#careers-section .job-description {
  color: #071F95;
  font-family: Urbanist, sans-serif;
  font-size: 16px;
  line-height: 24px;
}

/* Accordion */
#careers-section .accordion details {
  border-bottom: 1px solid #C1C7E5;
}
#careers-section .accordion summary {
  cursor: pointer;
  padding: 12px 0;
  font-family: Urbanist, sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  color: #071F95;
  outline: none;
}
#careers-section .accordion details[open] summary {
  /* optional styling when open */
  border-bottom: 1px solid transparent;
}
#careers-section .accordion p {
  margin: 0 0 12px 20px;   /* indent content */
  font-size: 16px;
  line-height: 24px;
  color: #071F95;
}

/* Optional: add simple transition for open/close */
#careers-section .accordion details > p {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s ease;
}
#careers-section .accordion details[open] > p {
  max-height: 500px; /* large enough to show content */
}

/* ------------------------------------------------------------------
   Move the native arrow to the right side of the <summary>.
------------------------------------------------------------------ */

#careers-section .accordion summary {
  display: flex;          /* allows us to use justify-content */
  align-items: center;
  justify-content: space-between; /* text on left, marker on right */
  padding-right: 30px;    /* space for the arrow */
}

/* Hide the default marker (so we can style it ourselves) */
#careers-section .accordion summary::-webkit-details-marker,
#careers-section .accordion summary::marker {
  display: none;
}

/* Add our own arrow */
#careers-section .accordion summary::after {
  content: "◀";           /* Unicode right‑pointing triangle */
  font-size: .5em;
  transition: transform 0.3s ease;
}

/* Rotate when open */
#careers-section .accordion details[open] summary::after {
  transform: rotate(-90deg);   /* points downwards */
}


/* 1. Keep the list “tight” – remove default margin and padding */
.indent {
  margin: 0;
  padding-left: 0;          /* will be overridden by .indent below */
}

/* 2. Give the list a left‑hand indent (in a flexible unit so it scales) */
.list-indent,
ul.indent {                     /* you can also use .indent { … } */
  padding-left: 1rem;         /* 16px = 1rem, but can change in media queries */
  padding-left: 1.5em;        /* “em” units are relative to the current font size */
  margin: 0 0 12px 20px;   /* indent content */
  font-size: 16px;
  line-height: 24px;
  color: #071F95;
  font-family: Urbanist, sans-serif;
}

/* 3. Make sure the bullet itself is indented *inside* the text area */
.indent li {
  list-style-type: disc;
  /* If you want the bullet to sit in the padding, use:
     list-style-position: inside;   (default) */
}