:root {
            --breakpoint-small: 70rem;
            --breakpoint-large: 90rem;
            --color-bg-dropdown: #000000;
            --color-text-dropdown: #ffffff;
            --color-border: #444;
            --color-btn-active: #333;
            --font-color-btn-active: white;
            --max-text-width: 25rem; /* Max width constraint for text */
        }

.job-section {
  position: relative;
  z-index: 1;
}

.left-aligned-row {
  /*margin-left: 2vw;*/
  margin-top: 0.9375rem;
  margin-bottom: 1.25rem;
}

.home-page-headings {
  margin-left: 2vw;
  margin-top: 0.9375rem;
  margin-bottom: 1.25rem;
}

.grid-container {
  margin-left: 0.2rem;
  margin-right: 0.2rem
}

.grid {
    display: grid;
    margin-left: 0.2rem;
    margin-right: 0.2rem;
    margin-bottom: 6.4rem;
    justify-items: center;
    /*grid-auto-rows: 1fr;
    justify-content: center;
    justify-items: stretch;*/
  }

.card {
    margin-left: 1rem;
    margin-right: 1rem;
    margin-top: 2rem;
    margin-bottom: 0rem;
    display: flex; 
    flex-direction: column;
    justify-self: stretch;
    min-height: 10rem;
    position: relative; /* Place content above the overlay */
    z-index: 2;
  }

.card-body {
  padding-left: 1.0rem;
  padding-right: 1.0rem;
  padding-bottom: 0.375rem;
  background-color: white;
  border-top: 0.0625rem solid gray;
  border-bottom: 0.0625rem solid gray;
  border-right: 0.125rem solid gray;
  border-left: 0.125rem solid gray;
  overflow: hidden;
  font-size: 1.0rem;
  height: 20rem;
  line-height: 1.2rem;
}

.card-body h5 {
  margin-top: 0.75rem;
  font-size: 1.1rem;
}

.card-text {
  /*font: sans-serif;*/
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  font-size: 1rem;
  margin-bottom: 0.2rem;
  }


.card-header {
  line-height: 200%;
  border-top:0.125rem solid gray;
  border-radius: 0.25rem 0.25rem 0px 0px;
  border-right: 0.125rem solid gray;
  border-left: 0.125rem solid gray;
  overflow: hidden;
  text-align: center;
}

.card-header .bgClosing {
  background-color: #f0c3c8;
}

.card-header .bgNew {
  background-color: #A4B494;
}


.card-header .bgNormal {
  background-color: #7F5AB3;
  background-color: #ccc9a1;
  /*background-color: hsla(194, 66%, 79%, 0.2);*/
}

.card-title {
  text-align: center;
  font-size: larger;
}

.card-title-container {
  height: 3.8rem;
}

.card-text-container {
  height: 12rem;
  padding-left: 1.8rem;
  padding-right: 1.0rem;
  overflow: hidden;
}

.card-text-close-and-link {
  margin-top: 1rem;
  padding-left: 1.8rem;
  padding-right: 1.0rem;
}



.card-footer {
  line-height: 200%;
  /*background-color: hsla(194, 42%, 73%, 1.0);*/
  background-color: #7F5AB3;
  background-color: #ccc9a1;
  text-align: center;
  border-bottom:0.125rem solid gray;
  border-right: 0.125rem solid gray;
  border-left: 0.125rem solid gray;
  border-radius: 0px 0px 0.25rem 0.25rem;
}

/*Apply background styles, if any, in page styles, not base*/
.background-container {
    position: relative;
    z-index: 0;
    min-height: 100vh;
    width: 100%;
    background-image: url('/static/img/background/colchester_castle_optimised.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.actions-wrapper {
  position:relative;
  z-index: 2;
  padding-top: 1rem;
}

.filter-buttons-wrapper {
  position:relative;
  z-index: 5;
  padding-top: 1rem;
}

.sort-buttons-wrapper {
  position:relative;
  z-index: 2;
  padding-top: 1rem;
}


.btn .btn-info {
  text-align: center;
}

.filterBox {
  display:none
}

.saveFilters {
  margin-left: 50%;
  transform: translateX(-50%);
}

/* Callout Box */
.filterBox {
  background-color: #e0e0e0;
  padding: 15px;
  margin-bottom: 20px;
  display: none; /* Hidden by default */
}

.filterBox.show {
  display: block;
}

.filterBox button {
  padding: 8px 15px;
  border-radius: 5px;
  border: 1px solid #28a745;
  background-color: #28a745;
  color: white;
  cursor: pointer;
}

.search-panel {
  display: flex;
  justify-content: center;
  width: 100%;
  /* if padding */
  padding: 0.625rem;
}

.search-panel input[type="text"] {
  width: 50%;
  padding: 0.5rem;
  border-radius: 0.3125rem;
  border: 0.0625rem solid gray;
  margin-bottom: 1.25rem;
}



.sortButtons {
  display: flex;
  /*flex-wrap: wrap;*/
  justify-content: center;
}

.sortButtons button {
  margin: 0.3125rem;
  padding: 0.5rem 0.9375rem;
  border-radius: 0.3125rem;
  /*border: 0.0625rem solid #007bff;*/
  border: 0.0625rem solid #02394A;
  background-color: white;
  /*color: #007bff;*/
  color: #02394A;
  cursor: pointer;
}

.sortButtons button.active {
  /*background-color: #007bff;*/
  background-color: #02394A;
  color: white;
}

.sortButtons button:hover {
  /*background-color: rgb(226, 236, 241);*/
  background-color: #d0dbdf;
}

 .filter-buttons-container {
            position: relative; /* Anchor for desktop dropdown */
            width: 100%;
            max-width: 100%;
            margin: 0 auto;
 }

.filter-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  overflow: visible;
}

.filter-buttons button {
  margin: 0.3125rem;
  padding: 0.5rem 0.9375rem;
  border-radius: 0.3125rem;
  border: 0.0625rem solid #830bf3;
  border: 0.0625rem solid #2C0703;
  background-color: white;
  color: #830bf3;
  color:#2C0703;
  cursor: pointer;
}

.filter-buttons button.active {
  background-color: #2C0703;
  color: white;
}

.filter-buttons button:hover {
  background-color: #e2cfcc;
}

/* Active State (Selection made) */
.filter-buttons button.has-selection {
    background-color: var(--color-btn-active);
    color: var(--font-color-btn-active);
    font-weight: bold;
}

/* The Asterisk using CSS to avoid text node manipulation */
.filter-buttons button.has-selection::after {
    content: " *";
    color: #d9534f;
}

.filter-buttons .close-button {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #888;
  transition: color 0.2s;
  }

.filter-buttons .close-button:hover {
  color: #333;
  }

@media screen and (max-width: 70rem) {

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, max(1fr));
  margin-left: 0.2rem;
  margin-right: 0.2rem;
  margin-bottom: 6.4rem;
  }

  .card {
    justify-self: stretch;
    min-width: 95%;
  }

  .card-header {
    font-size: 1.8rem;
  }

  .card-body{
    height:auto;
    line-height: 2.4rem;
  }

  .card-body h5 {
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size:2.4rem;
    line-height: 2.4rem;
    height:auto;
  }

  .card-text-container {
    padding-top: 0.5rem;
    margin-top: 4rem;
    height: auto;
  }

  .card-text {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  font-size: 2.2rem;
  margin-bottom: 0.2rem;
  }

  .card-footer {
    font-size: 1.8rem;
  }  

  
  .search-panel {
  /* ensures height is 5 rem */
  padding: 0.625rem;
  }
  
  .search-panel input[type="text"] {
    width: 90%;
    font-size: 2rem;
    height: 3.75rem;
  }

  .sortButtons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 1.25rem;
  }

  .sortButtons button {
    font-size:2rem;
    width: 23%;
    height: 5rem;
  }


  .sortButtons button:hover {
    background-color: #02394A;
    color: white;
  }

  .filter-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 1.25rem;
  }

  .filter-buttons button {
    font-size:2rem;
    width: 96%;
    height: 5rem;
  }

  .filter-buttons .button-group {
    width: 32%;
  }

  .filter-buttons .dropdown-box {
    position: relative;
            display: none; /* Hidden by default */
            border: 1px solid var(--color-border);
            background-color: var(--color-bg-dropdown);
            color: var(--color-text-dropdown);
            z-index: 50; /* Above existing 0-4 z-indices */
            padding: 1rem;
            box-shadow: 0 10px 25px rgba(0,0,0,0.5);
        }

  .filter-buttons .dropdown-box.active {
            display: block;
        }

  .filter-buttons .dropdown-box-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
            border-bottom: 1px solid #333;
            padding-bottom: 0.5rem;
        }

  .filter-buttons .dropdown-box-header h3 {
            margin: 0;
            font-size: 1.2rem;
            text-transform: capitalize;
            color: white;
        }

  .filter-buttons .close-button {
            background: none;
            border: none;
            color: white;
            font-size: 2rem;
            line-height: 1;
            cursor: pointer;
            padding: 0 0.5rem;
        }

  .filter-buttons .dropdown-menu {
            list-style: none;
            padding: 0;
            margin: 0;
            /* Column logic applied via JS or specific media queries below */
        }

  .filter-buttons .dropdown-menu li {
            margin-bottom: 0.5rem;
            break-inside: avoid; /* Prevent splitting items across columns */
            page-break-inside: avoid;
        }

  .filter-buttons .dropdown-menu label {
            margin-left: 0.5rem;
            cursor: pointer;
            font-size: 0.95rem;
            /* Text wrapping logic */
            max-width: var(--max-text-width);
            display: inline-block;
            vertical-align: top;
        }
  .filter-buttons .dropdown-box {
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                overflow-y: auto;
            }

  .filter-buttons .dropdown-menu {
                column-count: 2;
                column-gap: 1.5rem;
            }

}

@media screen and (min-width: 70rem) and (max-width: 90rem) {

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min-content, 2fr));
  margin-left: 0.1rem;
  margin-right: 0.1rem;
  margin-bottom: 6.4rem;
  }

.card {
    justify-self: stretch;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
    min-width: 47%;
  }  

.card-body{
    height:auto;
    line-height: 2.4rem;
  }

  .card-body h5 {
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size:1.4rem;
    line-height: 1.6rem;
    height:4.8rem;
  }

 .card-text-container {
    padding-top: 0.5rem;
    margin-top: 1rem;
    height: 15rem;
  }

  .card-text {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  font-size: 1.25rem;
  margin-bottom: 0.2rem;
  }

}


@media screen and (min-width: 90rem) and (max-width: 110rem) {

  .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min-content, 3fr));
  margin-left: 0.2rem;
  margin-right: 0.2rem;
  margin-bottom: 6.4rem;
  }

.card {
    justify-self: stretch;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
    min-width: 32%;
  } 

}




/* --- Dropdown Styling --- */
.filter-buttons .dropdown-box {
    display: none; /* Hidden by default */
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-dropdown);
    color: var(--color-text-dropdown);
    padding: 1rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

.filter-buttons .dropdown-box.active {
    display: block;
}

.dropdown-box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    border-bottom: 1px solid #333;
    padding-bottom: 0.5rem;
}

.dropdown-box-header h3 {
    margin: 0;
    font-size: 1.2rem;
    text-transform: capitalize;
}

.close-button {
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.5rem;
}

.dropdown-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    /* Column logic applied via JS or specific media queries below */
}

.dropdown-menu li {
    margin-bottom: 0.5rem;
    break-inside: avoid; /* Prevent splitting items across columns */
    page-break-inside: avoid;
}

.dropdown-menu label {
    margin-left: 0.5rem;
    cursor: pointer;
    font-size: 0.95rem;
    /* Text wrapping logic */
    max-width: var(--max-text-width);
    display: inline-block;
    vertical-align: top;
}


        @media (max-width: 69.99rem) {
            .dropdown-box {
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                overflow-y: auto;
            }

            .dropdown-menu {
                column-count: 2;
                column-gap: 1.5rem;
            }
        }

        /* Medium & Large Dropdown (>= 70rem) */
        @media (min-width: 70rem) {
            .dropdown-box {
                position: absolute;
                /* Anchor to bottom left of container (effectively bottom left of first button) */
                top: 100%; 
                left: 10%;
                width: 80%; /* Width of filter-buttons-container */
                margin-top: 0.5rem;
                max-height: 80vh;
                overflow-y: auto;
            }
            
            /* Columns will be calculated by JS, but default styles here */
            .dropdown-menu {
                column-gap: 2rem;
                column-rule: 1px solid #333;
            }
        }