@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');

:root {

  /* icare Brand Colours */
  --primary-color: #004c97;      /* icare Blue */
  --secondary-color: #00a870;    /* Hyams Green */
  --tertiary-color: #5cd2ff;     /* Harbour Blue */

  /* Accent Colours */
  --accent-pink: #ff447c;        /* Galah Pink */
  --accent-yellow: #ffe000;      /* Wattle Yellow */

  /* Neutral Colours */
  --dark-color: #000000;
  --medium-color: #666666;
  --light-color: #ffffff;
  --grey-color: #e6e7e8;

  /* General */
  --input-border-colour: #e6e7e8;
  --card-background-colour: #ffffff;
  --card-border-colour: #e6e7e8;

  --border-radius: 6px;
  --box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  --padding: 12px 28px;
  --button-border-radius: 999px;

  /* Fonts */
  --font-family-body: "Noto Sans", Arial, sans-serif;
  --font-family-heading: "Noto Sans", Arial, sans-serif;

  /* Layout */
  --card-padding: 30px;
  --card-columns: 33%;
  --filter-columns: 25%;
}

/*** GLOBAL ***/

body {
  background: #ffffff;
  color: #000000;
  line-height: 1.5;
  font-family: var(--font-family-body);
  font-size: 16px;
  font-weight: 400;
}

/*** HEADINGS ***/

.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  font-weight: 700;
  color: var(--primary-color);
}

.h1, h1 { font-size: 50px; }
.h2, h2 { font-size: 30px; }
.h3, h3 { font-size: 24px; }
.h4, h4 { font-size: 20px; }
.h5, h5 { font-size: 18px; }
.h6, h6 { font-size: 16px; }

/*** LINKS ***/

a,
a:visited {
  color: var(--primary-color);
}

a:hover {
  color: var(--secondary-color);
}

/*** NAVIGATION ***/

.nav-link {
  color: #000000 !important;
  font-size: 15px;
  font-weight: 400 !important;
}

/*** BUTTONS ***/

.btn,
button,
.button {
  font-family: var(--font-family-body);
  font-weight: 700;
  padding: var(--padding);
  border-radius: var(--button-border-radius) !important;
  font-size: 15px;
  transition: all .25s ease;
}

.btn-primary,
a.button.button1,
a.button.button2,
a.button.button3 {
  background: var(--primary-color);
  border: 1px solid var(--primary-color);
  color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
a.button.button1:hover,
a.button.button2:hover,
a.button.button3:hover {
  background: #003a73;
  border-color: #003a73;
  color: #ffffff;
}

.btn-success {
  background: var(--secondary-color);
  border: 1px solid var(--secondary-color);
  color: #ffffff !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  background: #00885a;
  border-color: #00885a;
  color: #ffffff !important;
}



/*** INPUTS ***/

.job-search-control input,
.job-search-dropdown-filters select,
.selectize-input {
  border: 1px solid var(--input-border-colour);
  border-radius: var(--border-radius);
}

/*** BADGES ***/

.badge {
  background: var(--primary-color) !important;
  color: #ffffff;
}

.page-item.active .page-link {
  background: var(--primary-color);
  border-color: var(--primary-color);
}

.page-link {
  color: var(--primary-color);
}

/*** CARDS ***/

.card {
  border: 1px solid var(--card-border-colour);
  border-radius: var(--border-radius);
  background: var(--card-background-colour);
  padding: var(--card-padding);
  box-shadow: var(--box-shadow);
}

.card-body {
  padding: 0;
}

.card-footer {
  background: #ffffff;
  border-top: 0;
}

/*** ACCORDIONS ***/

.accordion-item {
  border: 1px solid #e6e7e8;
}

.accordion-button:not(.collapsed) {
  background: #f5f5f5;
  color: var(--primary-color);
}

/*** CANDIDATE PORTAL ***/

.candidate-settings-panel {
  background: #f9f9f9;
}

.candidate-settings {
  background: #f5f5f5;
}

/*** FOOTER ***/

footer {
  background: var(--primary-color);
  padding-top: 16px;
}

footer *,
footer a,
footer a:hover,
footer a:visited {
  color: #ffffff;
}

/*** SELECTIZE ***/

.selectize-control.multi .selectize-input > div {
  background: var(--primary-color);
  color: #ffffff !important;
}

.selectize-dropdown-content .option.active {
  background: var(--primary-color);
  color: #ffffff !important;
}

.selectize-dropdown-content .option {
  color: var(--primary-color);
}

/*** BANNERS ***/

.banner_text .block-image-cover .block-image-text h1 {
  background: #004c97;
  color: #ffffff;
}

.banner_text_pink .block-image-cover .block-image-text h1 {
  background: #00a870;
  color: #ffffff;
}

.banner_text_teal .block-image-cover .block-image-text h1 {
  background: #5cd2ff;
  color: #000000;
}

/*** TEAM PAGES ***/

.meet-team-col,
.meet-team-search-col {
  border: 1px solid #e6e7e8;
  padding: 40px;
}

.row-background-brand_color_6.meet-team-col {
  background: #ffffff;
}

.bg-hyams-green {
    background-color: #66cba9 !important;
}

.bg-hyams-light {
    background-color: #cceee2 !important;
}

.bg-harbour-blue {
    background-color: #9de4ff !important;
}

.bg-harbour-blue-light {
    background-color: #def6ff !important;
}

.bg-grey {
    background-color: #e6e7e8 !important;
}

.green-accent-line {
    position: relative;
}

.green-accent-line::before {
    content: "";
    display: block;
    width: 60px;
    height: 5px;
    background-color: #00a870; /* Hyams Green */
    margin: 0 auto 20px auto;
    border-radius: 3px;
}

.green-accent-line-left::before {
    content: "";
    display: block;
    width: 60px;
    height: 5px;
    background-color: #00a870;
    margin: 0 0 20px 0;
    border-radius: 3px;
}

.green-accent-line-right::before {
    content: "";
    display: block;
    width: 60px;
    height: 5px;
    background-color: #00a870;
    margin: 0 0 20px auto;
    border-radius: 3px;
}



/* ==========================================
   CAREERS PAGE CARDS
   ========================================== */

.care-card,
.corporate-card,
.technology-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 40px;
    height: 100%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: all .2s ease;
}

.care-card:hover,
.corporate-card:hover,
.technology-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* CARE - PINK */

.care-card {
    border: 4px solid #ff447c;
}

/* CORPORATE - GREEN */

.corporate-card {
    border: 4px solid #00a870;
}

/* TECHNOLOGY - LIGHT BLUE */

.technology-card {
    border: 4px solid #5cd2ff;
}

/* Headings */

.care-card h1,
.care-card h2,
.care-card h3,
.care-card h4 {
    color: #ff447c !important;
}

.corporate-card h1,
.corporate-card h2,
.corporate-card h3,
.corporate-card h4 {
    color: #00a870 !important;
}

.technology-card h1,
.technology-card h2,
.technology-card h3,
.technology-card h4 {
    color: #5cd2ff !important;
}

.care-tile,
.corporate-tile,
.technology-tile {
    border-radius: 10px;
    overflow: hidden;
}

.care-tile,
.corporate-tile,
.technology-tile {
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.25s ease;
    cursor: pointer;
}

.care-tile,
.corporate-tile,
.technology-tile {
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.25s ease;
    cursor: pointer;
}

.care-tile:hover,
.corporate-tile:hover,
.technology-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.15);
}


/* ==========================================
   SEARCH CTA SECTION
   ========================================== */

.job-search-control {
    padding: 48px 54px !important;
}

/* Force spacing between search field and buttons */

/* Search field */

.job-search-control input {
    height: 52px !important;
    border-radius: 10px !important;
    border: 1px solid #e6e7e8 !important;
    font-size: 16px;
    padding: 0 18px !important;
}

/* Search button */

.job-search-control .btn-primary,
.job-search-control .input-group-btn .btn {

    background: #004c97 !important;
    border: 2px solid #004c97 !important;
    color: #ffffff !important;

    height: 52px !important;
    min-width: 220px !important;

    border-radius: 10px !important;

    font-weight: 700;

    padding-left: 30px !important;
    padding-right: 30px !important;

    margin-left: 12px !important;
}



/* ==========================================
   SEARCH CTA RESPONSIVE FIXES
   ========================================== */

@media (max-width: 992px) {

    .job-search-control {
        padding: 30px !important;
    }

    .job-search-control .input-group {
        width: 100% !important;
    }

}

@media (max-width: 768px) {

    .job-search-control {
        padding: 24px !important;
    }

    .job-search-control input {
        margin-bottom: 12px;
    }

    .job-search-control .btn-primary,
    .job-search-control .btn-talent-network {

        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;

        margin-left: 0 !important;
        margin-top: 10px;
    }

}

@media (max-width: 576px) {

    .job-search-control {
        padding: 20px !important;
    }

}

/* ==========================================
   CAREER TILE TEXT FIX
   ========================================== */

.care-tile .block-image-text,
.corporate-tile .block-image-text,
.technology-tile .block-image-text {

    width: auto !important;
    max-width: 80% !important;

    overflow: visible !important;

    left: 30px !important;
    right: auto !important;
}

/* Headings */

.care-tile .block-image-text h1,
.care-tile .block-image-text h2,
.corporate-tile .block-image-text h1,
.corporate-tile .block-image-text h2,
.technology-tile .block-image-text h1,
.technology-tile .block-image-text h2 {

    white-space: normal !important;

    overflow: visible !important;

    max-width: 100% !important;

    word-break: normal !important;
}

/* Supporting text */

.care-tile .block-image-text p,
.corporate-tile .block-image-text p,
.technology-tile .block-image-text p {

    white-space: normal !important;

    max-width: 100% !important;
}

/* Smaller desktop screens */

@media (max-width: 1400px) {

    .care-tile .block-image-text,
    .corporate-tile .block-image-text,
    .technology-tile .block-image-text {

        max-width: 90% !important;
    }

}

/* ==========================================
   GLOBAL IMAGE RADIUS
   ========================================== */

.block-image-cover,
.block-image,
.block-image img,
.page-block-image {

    border-radius: 10px !important;
    overflow: hidden !important;
}

/* ==========================================
   BUTTON 1 - ICARE BLUE
   ========================================== */

a.button.button1 {

    background: #004c97 !important;
    border: 2px solid #004c97 !important;

    color: #ffffff !important;

    border-radius: 10px !important;

    padding: 8px 15px !important;

    font-weight: 700;
    text-transform: uppercase;

    text-decoration: none !important;

    transition: all .25s ease;
}

a.button.button1:hover {

    background: #003a73 !important;
    border-color: #003a73 !important;

    color: #ffffff !important;
}

/* ==========================================
   BUTTON 2 - HYAMS GREEN
   ========================================== */

a.button.button2 {

    background: #00a870 !important;
    border: 2px solid #00a870 !important;

    color: #ffffff !important;

    border-radius: 10px !important;

    padding: 8px 15px !important;

    font-weight: 700;
    text-transform: uppercase;

    text-decoration: none !important;

    transition: all .25s ease;
}

a.button.button2:hover {

    background: #00885a !important;
    border-color: #00885a !important;

    color: #ffffff !important;
}

/* ==========================================
   BUTTON 3 - WHITE OUTLINE
   ========================================== */

a.button.button3 {

    background: transparent !important;
    border: 2px solid #ffffff !important;

    color: #ffffff !important;

    border-radius: 10px !important;

    padding: 8px 15px !important;

    font-weight: 700;
    text-transform: uppercase;

    text-decoration: none !important;

    transition: all .25s ease;
}

a.button.button3:hover {

    background: rgba(255,255,255,0.1) !important;

    color: #ffffff !important;
    border-color: #ffffff !important;
}

/* ==========================================
   BUTTON 4 - PINK CTA
   ========================================== */

a.button.button4 {

    background: #ff447c !important;
    border: 2px solid #ff447c !important;

    color: #ffffff !important;

    border-radius: 10px !important;

    padding: 8px 15px !important;

    font-weight: 700;
    text-transform: uppercase;

    text-decoration: none !important;

    transition: all .25s ease;
}

a.button.button4:hover {

    background: #e6356c !important;
    border-color: #e6356c !important;

    color: #ffffff !important;
}

/* Force Talent Community button green */

a.ms-2.btn.btn-talent-network,
.btn.btn-talent-network,
.btn-talent-network {

    background: #00a870 !important;
    background-color: #00a870 !important;

    border: 2px solid #00a870 !important;

    color: #ffffff !important;

    border-radius: 10px !important;

    font-weight: 700 !important;
}

a.ms-2.btn.btn-talent-network:hover,
.btn.btn-talent-network:hover,
.btn-talent-network:hover {

    background: #00885a !important;
    background-color: #00885a !important;

    border-color: #00885a !important;

    color: #ffffff !important;
}