/*------------------------------------*\
  #IMPORTS
  * Import external stylesheets here.
\*------------------------------------*/
@import url(/css/all.css?v=10); /* Imports a global or utility stylesheet containing common styles. */

/*------------------------------------*\
  #HEADER SECTION STYLES
  * Styles for the main hero section of the page, typically at the top.
\*------------------------------------*/

/* Hope Header: Overall container for the header section. */
.hope-header {
  width: 100%; /* Ensures the header spans the full width of its parent. */
  box-sizing: border-box; /* Includes padding and border in the element's total width and height. */
}

/* Hope Header Content: Defines the background, height, and main layout for the header's content. */
.hope-header-content {
  /* Applies a linear gradient overlay on top of a background image. */
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6)),
    url("/photos/hopecareer.png");
  width: 100%; /* Ensures the content area takes full width. */
  min-height: 80vh; /* Sets a minimum height to 80% of the viewport height. */
  background-repeat: no-repeat; /* Prevents the background image from repeating. */
  background-size: cover; /* Scales the background image to cover the entire container. */
  background-position: center center; /* Centers the background image horizontally and vertically. */
  display: flex; /* Enables Flexbox for content alignment. */
  flex-direction: column; /* Stacks header content vertically. */
  justify-content: center; /* Centers content vertically within the flex container. */
  align-items: center; /* Centers content horizontally within the flex container. */
  padding-top: 40px; /* Adds top padding, adjusted for initial spacing. */
  box-sizing: border-box; /* Includes padding and border in the element's total size. */
}

/*------------------------------------*\
  #HEADER TEXT CONTAINER
  * Styles for the text content block within the header.
\*------------------------------------*/

/* Hope Header Text Container: Defines the layout and styling for the main text block. */
.hope-header-text-container {
  width: 100%; /* Default full width for mobile screens. */
  color: var(--white); /* Sets the text color to a predefined white variable. */
  text-align: center; /* Centers all text content within this container. */
  margin: auto; /* Centers the container horizontally on the page. */
  padding-bottom: 50px; /* Adds significant padding to the bottom. */
  box-sizing: border-box; /* Includes padding and border in the element's total size. */
  padding-left: 15px; /* Adds default horizontal padding for inner content. */
  padding-right: 15px; /* Adds default horizontal padding. */
}

/*------------------------------------*\
  #HEADER TITLE AND TEXT
  * Specific styles for the main title and descriptive text within the header.
\*------------------------------------*/

/* Hope Header Title: Styling for the prominent main title. */
.hope-header-title {
  font-weight: bolder; /* Makes the font extra bold. */
  padding-top: 50px; /* Adds significant top padding to the title itself. */
  margin-top: 0; /* Removes default H1 top margin for consistent spacing. */
  margin-bottom: 1rem; /* Standard spacing below the title. */
  font-size: 3rem; /* Sets a large font size for visual impact. */
  line-height: 1.2; /* Adjusts line height for better readability of multi-line titles. */
}

/* Hope Job Question & Statement: Styling for descriptive text paragraphs. */
.hope-job-question,
.hope-job-statement {
  line-height: 1.5; /* Ensures good readability for body text. */
  margin-bottom: 1rem; /* Standard paragraph margin. */
}

/* Specific margins for the job question text. */
.hope-job-question {
  margin-top: 1rem; /* Adds top margin. */
  margin-bottom: 1rem; /* Adds bottom margin. */
}

/* Specific margins for the job statement text. */
.hope-job-statement {
  margin-left: auto; /* Centers the statement horizontally. */
  margin-right: auto; /* Centers the statement horizontally. */
  margin-top: 1rem; /* Adds top margin for spacing. */
}

/*------------------------------------*\
  #CURRENT OPENINGS SECTION
  * Styles for the section displaying job openings.
\*------------------------------------*/

/* Current Openings Section: Main container for the job listings. */
.current-openings-section {
  width: 100%; /* Ensures the section spans the full width. */
  box-sizing: border-box; /* Includes padding and border in the element's total size. */
}

/* Current Openings Container: Limits content width and applies consistent padding. */
.current-openings-container {
  max-width: 1200px; /* Sets a maximum width for the content, similar to a standard container. */
  margin-left: auto; /* Centers the container horizontally. */
  margin-right: auto; /* Centers the container horizontally. */
  padding-left: 15px; /* Adds default horizontal padding. */
  padding-right: 15px; /* Adds default horizontal padding. */
  margin-top: 50px; /* Adds vertical margin to the top. */
  margin-bottom: 50px; /* Adds vertical margin to the bottom. */
}

/*------------------------------------*\
  #JOB LISTINGS LAYOUT
  * Defines the overall layout of the job openings header and list.
\*------------------------------------*/

/* Openings Header and List: Flex container for the title column and job listings. */
.openings-header-and-list {
  display: flex; /* Enables Flexbox for content arrangement. */
  flex-direction: column; /* Stacks items vertically by default (mobile-first). */
  justify-content: center; /* Centers content when in column mode. */
  width: 100%; /* Ensures the row takes full available width. */
}

/*------------------------------------*\
  #LEFT COLUMN: CURRENT OPENINGS TITLE
  * Styles for the title that introduces the job listings.
\*------------------------------------*/

/* Openings Header: Container for the "Current Openings" title. */
.openings-header {
  width: 100%; /* Default full width for mobile. */
  display: flex; /* Enables Flexbox for centering content. */
  justify-content: center; /* Centers content horizontally. */
  text-align: center; /* Centers the text itself. */
  margin-bottom: 30px; /* Adds space below the title on mobile. */
  box-sizing: border-box; /* Includes padding and border in the element's total size. */
  padding-left: 15px; /* Adds horizontal padding. */
  padding-right: 15px; /* Adds horizontal padding. */
}

/* Openings Title: Styling for the "Current Openings" heading. */
.openings-title {
  font-weight: bolder; /* Makes the title text extra bold. */
  color: var(--text-dark); /* Sets the title text color to a dark variable. */
  margin: 0; /* Removes default margins for the heading. */
  padding: 0; /* Removes default padding. */
}

/*------------------------------------*\
  #RIGHT COLUMN: JOB LISTINGS
  * Styles for the container holding individual job cards.
\*------------------------------------*/

/* Job Listings Wrapper: Container for all the job cards. */
.job-listings-wrapper {
  width: 100%; /* Default full width for mobile. */
  box-sizing: border-box; /* Includes padding and border in the element's total size. */
  padding-left: 15px; /* Adds horizontal padding. */
  padding-right: 15px; /* Adds horizontal padding. */
}

/* Inner Row for Job Cards: Defines the layout of job cards within the wrapper. */
.job-listings-wrapper > .job-row {
  display: flex; /* Enables Flexbox for card arrangement. */
  flex-direction: column; /* Stacks cards vertically by default for mobile. */
  justify-content: center; /* Centers cards horizontally when in column mode. */
  align-items: center; /* Aligns cards vertically when in column mode. */
  width: 100%; /* Ensures the inner row takes full available width. */
}

/*------------------------------------*\
  #INDIVIDUAL JOB CARD
  * Styles for each individual job listing card.
\*------------------------------------*/

/* Job Card Column: Defines the column properties for each job card. */
.job-card-column {
  width: 100%; /* Full width by default for mobile. */
  margin-top: 10px; /* Adds vertical margin. */
  margin-bottom: 10px; /* Adds vertical margin. */
  box-sizing: border-box; /* Includes padding and border in the element's total size. */
  padding-left: 10px; /* Adds horizontal padding to create spacing between cards. */
  padding-right: 10px; /* Adds horizontal padding. */
}

/*------------------------------------*\
  #JOB BOX STYLING
  * Styles for the main container of each job listing's content.
\*------------------------------------*/

/* Job Box: The actual box containing job details. */
.job-box {
  position: relative; /* Needed for positioning the shimmer effect pseudo-element. */
  height: 250px; /* Sets a fixed height for consistency. */
  background-color: var(--bg); /* Sets the background color to a variable. */
  border-radius: 5px;
  overflow: hidden; /* Hides content that exceeds the box's dimensions, essential for shimmer. */
  padding: 0 40px; /* Adds significant horizontal padding inside the box. */
  display: flex; /* Enables Flexbox for content arrangement within the box. */
  flex-direction: column; /* Stacks content vertically. */
  justify-content: center; /* Vertically centers content if there's extra space. */
  align-items: flex-start; /* Aligns content to the left inside the box. */
  color: var(
    --white
  ); /* Sets the default text color for content within the job box. */
  box-sizing: border-box; /* Includes padding and border in the element's total size. */
}

/* Shimmer Effect for Job Box: Creates a subtle animation for visual appeal. */
.job-box::before {
  content: ""; /* Required for pseudo-elements. */
  position: absolute; /* Positions the shimmer relative to the job-box. */
  top: 0; /* Aligns to the top. */
  left: -75%; /* Starts off-screen to the left. */
  width: 50%; /* Sets the width of the shimmer effect. */
  height: 100%; /* Spans the full height of the box. */
  /* Creates a linear gradient for the shimmer effect. */
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0.1) 100%
  );
  animation: shimmer 2s infinite; /* Applies the 'shimmer' animation, repeating infinitely. */
  pointer-events: none; /* Allows mouse events to pass through the shimmer to the underlying content. */
}

/* Keyframe animation for the shimmer effect. */
@keyframes shimmer {
  0% {
    left: -75%; /* Starts off-screen. */
  }
  100% {
    left: 125%; /* Moves across and off-screen to the right. */
  }
}

/* Job Box Content: Inner container for the actual text and tags. */
.job-box-content {
  display: flex; /* Enables Flexbox. */
  flex-direction: column; /* Stacks content vertically. */
  width: 100%; /* Ensures content takes full width of its padding-adjusted parent. */
}

/*------------------------------------*\
  #LOCATION TAGS
  * Styles for "Remote" and "Location" tags within job listings.
\*------------------------------------*/

/* Job Tags Container: Holds the remote/location tags. */
.job-tags-container {
  display: flex; /* Enables Flexbox for tag arrangement. */
  margin-top: 25px; /* Adds top margin for spacing. */
  align-items: center; /* Aligns tags vertically in the center. */
  width: 100%; /* Ensures the container takes full width. */
}

/* Remote Job Tag Styling. */
.job-tag-remote {
      width: fit-content;
      height: 30px;
      background-color: var(--lightest_bg  );
      border-radius: 5px;
      padding: 5px 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: black;
}

/* Location Job Tag Styling. */
.job-tag-location {
      width: fit-content;
      height: 30px;
      background-color: white;
      color: black;
      border-radius: 5px;
      padding: 5px 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 15px;
}

/* Common text styling for all job tags. */
.job-tag-text {
  font-weight: bolder; /* Makes the tag text extra bold. */
  margin: 0; /* Removes default paragraph margins. */
  line-height: 1; /* Ensures text stays within the tag's height. */
}

/*------------------------------------*\
  #JOB TITLE AND APPLY BUTTON
  * Styles for the job position title and the "Apply" button.
\*------------------------------------*/

/* Job Title Container: Holds the specific job position title. */
.job-title-container {
  margin-top: 40px; /* Adds top margin for spacing. */
  width: 100%; /* Ensures the container takes full width. */
}

/* Job Title Text: Styling for the individual job position title. */
.job-title-text {
  font-weight: bolder; /* Makes the title text extra bold. */
  color: var(--white); /* Sets the text color to white. */
  margin: 0; /* Removes default heading margins. */
  line-height: 1.2; /* Adjusts line height for readability. */
  font-size: 1.5rem; /* Sets a moderate font size. */
}

/* Job Apply Link: Container for the apply button. */
.job-apply-link {
  margin-top: 15px; /* Adds top margin for spacing. */
  width: 100%; /* Ensures the container takes full width. */
}

/* Apply Button Styling: The main call-to-action button for applying to a job. */
.apply-button {
  border: 1px solid #af8e98; /* Adds a solid border with a specific color. */
  background-color: #af8e98; /* Sets the background color to match the border. */
  font-weight: bold; /* Makes the button text bold. */
  color: var(--white); /* Sets the button text color to white. */
  text-decoration: none; /* Removes underline from the link. */
  padding: 8px 15px; /* Adds internal padding to the button. */
  border-radius: 5px;
  display: inline-flex; /* Use inline-flex for proper centering of content while allowing it to sit inline. */
  justify-content: center; /* Centers text horizontally within the button. */
  align-items: center; /* Centers text vertically within the button. */
  min-height: 40px; /* Sets a minimum height for the button. */
  box-sizing: border-box; /* Includes padding and border in the element's total size. */
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease; /* Smooth transition for hover effects. */
}

/* Hover effect for the apply button. */
.apply-button:hover {
  background-color: #c2a7b5; /* Slightly lighter background on hover. */
  border-color: #c2a7b5; /* Changes border color on hover. */
  color: var(--white); /* Ensures text remains white on hover. */
}

/*------------------------------------*\
  #GENERAL UTILITY CLASSES
  * Common classes that might be used across different sections.
\*------------------------------------*/

/* Role and Apply Box: General styling for interactive boxes (likely for tab navigation). */
.role-box,
.apply-box {
  height: 50px;
  border-radius: 5px;
  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for hover/active states. */
  cursor: pointer; /* Indicates the element is clickable. */
}

/* General Apply Button: A more generic button style (could be used outside job listings). */
.btn-apply {
  background-color: var(--bg); /* Sets background color from a variable. */
  color: var(--white); /* Sets text color to white. */
}

/* Active Tab: Styling for an active tab in a navigation component. */
.active-tab {
  background-color: var(--bg); /* Sets background color from a variable. */
  color: white; /* Sets text color to white. */
  border-radius: 10px; /* Applies a border radius. */
}

/* Career Form: Styling for a career application form. */
.career-form {
  background-color: lightgray; /* Sets a light gray background. */
  color: black; /* Sets text color to black. */
  border-radius: 30px; /* Applies a large border radius for rounded corners. */
}

/* Custom Input Fields: Styling for form input elements. */
.custom-input,
.custom-input2 {
  height: 40px;
  border: none; /* Removes default border. */
  border-radius: 10px; /* Applies a border radius. */
  padding: 5px 10px; /* Adds internal padding. */
  color: #000; /* Sets text color to black. */
}

/* Focus state for custom input fields. */
.custom-input:focus,
.custom-input2:focus {
  outline: none; /* Removes default focus outline. */
  box-shadow: none; /* Removes default focus box shadow. */
}

/* Hover state for outline-dark buttons. */
.btn-outline-dark:hover {
  background-color: var(--bg); /* Changes background color on hover. */
  color: var(--white); /* Changes text color to white on hover. */
}

/* Submit Contact Button: Styling for a form submission button. */
.submit-contact {
  background-color: var(--bg); /* Sets background color from a variable. */
  color: var(--white); /* Sets text color to white. */
  width: 100%; /* Spans full width. */
  height: 40px;
  border-radius: 5px; /* Applies a border radius. */
  display: flex; /* Enables Flexbox. */
  align-items: center; /* Vertically aligns content. */
  border: 0px; /* Removes border. */
}

/* Media Queries */

/* This section contains all responsive design adjustments for different screen sizes. Keeping them grouped here helps with easier management of breakpoints. */

/* Media query for header content on large screens. */
@media (min-width: 992px) {
  .hope-header-content {
    margin-top: 0; /* Resets any top margin that might be applied on smaller screens. */
  }
  .text-small {
    display: none;
  }
  .hope-header-text-container {
    width: 100%; /* Resets to full width on large screens. */
  }
  .openings-header-and-list {
    flex-direction: row; /* Arranges items horizontally on desktop. */
    justify-content: center; /* Centers content horizontally within the row. */
  }
  .openings-header {
    width: 25%; /* Sets width to 1/4 on large screens. */
    margin-top: 0; /* Resets top margin for desktop. */
    justify-content: flex-start; /* Aligns title to the left. */
    align-items: flex-start; /* Aligns title to the top. */
    text-align: left; /* Aligns text left. */
    padding-right: 30px; /* Adds spacing to the right of the title. */
  }
  .job-listings-wrapper {
    width: 80%; /* Sets width to 3/4 on large screens. */
  }
  .job-listings-wrapper > .job-row {
    flex-direction: row; /* Arranges cards horizontally on desktop. */
    justify-content: space-around; /* Distributes space evenly around cards. */
    flex-wrap: wrap; /* Allows job cards to wrap to the next line if needed. */
    align-items: flex-start; /* Aligns cards to the top of the row. */
  }
  .job-card-column {
    width: 50%; /* Sets width to 1/2 for large screens, allowing two cards per row. */
  }
}

/* Media query for job listings wrapper on small-medium screens. */
@media (min-width: 576px) {
  .job-listings-wrapper {
    width: 100%; /* Explicitly set to full width. */
  }
  .job-listings-wrapper {
    width: 80%; /* Sets width to 7/12 for small-medium screens. */
  }
  .openings-header {
    width: 30%; /* Sets width to 2/3 for small-medium screens. */
    margin-top: 60px; /* Adds top margin for spacing. */
  }
  .hope-header-text-container {
    width: 100%; /* Sets width to 2/3 of its parent (e.g., for tablet views). */
  }
}
@media (min-width: 992px) {
  .job-listings-wrapper > .job-row {
    display: flex; /* Enables Flexbox for card arrangement. */
    flex-direction: row; /* Stacks cards vertically by default for mobile. */
    justify-content: center; /* Centers cards horizontally when in column mode. */
    align-items: center; /* Aligns cards vertically when in column mode. */
    width: 100%; /* Ensures the inner row takes full available width. */
  }
}

/* Media query for career form border-radius on small screens. */
@media (max-width: 768px) {
  .career-form {
    border-radius: 0; /* Removes border radius on smaller screens for a full-width look. */
  }
}