.contentZone {
    /* generic variables */
    --white: #f2f2f2;
    --black: #000000;
}

.contentZone.green {
    /* ACCESSIBILITY PALETTE */
    --color1: #edfaf4;
    --color2: #7dbd94;
    --color3: #3c6e4e;
    --color4: #36503f;
}

.contentZone.red {
    /* ACCESSIBILITY PALETTE */
    --color1: #f8eae9;
    --color2: #e78f87;
    --color3: #A32E2E;
    --color4: #5A1A1A;
}

.contentZone.orange {
    /* ACCESSIBILITY PALETTE */
    --color1: #fcf3eb;
    --color2: #e7a76c;
    --color3: #A65407;
    --color4: #854c17;
}

.contentZone.purple {
    /* ACCESSIBILITY PALETTE */
    --color1: #f5effa;
    --color2: #b79dcf;
    --color3: #7746a5;
    --color4: #483a55;
}

.contentZone.blue {
    /* ACCESSIBILITY PALETTE */
    --color1: #e3f5f8;
    --color2: #3993a5;
    --color3: #274f64;
    --color4: #181935;
}




.contentHeading {
    font-family: beaufort-pro;
    font-weight: 900;
    font-size: 32px;
    text-transform: uppercase;
    color: var(--color4);
    white-space: nowrap;
    border-bottom: 3px solid var(--color3);
    line-height: 32px;
    width: 100%;
    height: fit-content;
    padding: 6px;
    padding-top: 0px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    z-index: 0;
}

.displayPanel {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.search-zone {
    width: calc(100% - 8px);
    color: var(--color4);
    background: var(--color1);
    font-size: 20px;
    font-family: Roboto Condensed;
    font-weight: 400;
    padding: 6px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 8px;
}

.listZone {
    --gapPadding: 12px;
    width: 100%;
    border-bottom: 3px solid var(--color3);
    border-top: 3px solid var(--color3);
    flex-grow: 1;
    padding: var(--gapPadding);
    display: flex;
    gap: var(--gapPadding);
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.listItem {
    background: var(--color2);
    width: calc((100% - (var(--gapPadding) * 3)) / 3);
    aspect-ratio: 1 / 1;
}

.top-search-bar{
    display:flex;
    justify-content: flex-start;
    align-items: center;
    width:100%;
    gap: 8px;
}

.search-zone .filter-zone{
    width:100%;
    height:fit-content;
    display:none;
    justify-content: flex-start;
    align-items: stretch;
    flex-direction: column;
    gap: 6px;
}

.search-zone.filterToggle .filter-zone {
    display: flex;
}





/* TAG formatting */

.tag-container, .search-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    padding: 2px 6px;
    background: var(--white);
    border-left: 2px solid var(--color3);
    border-right: 2px solid var(--color3);
    border-top: 1px solid var(--color2);
    border-bottom: 1px solid var(--color2);
    min-height: 32px;
    height:fit-content;
    flex-wrap: wrap;
    flex-grow: 1;
}

.search-icon {
    font-size: 14px;
    line-height: 14px;
    opacity: 0.75;
    color: var(--color4);

}

.tag-container label{
    font-family: beaufort-pro;
    font-size: 14px;
    line-height:14px;
    font-weight:900;
    font-style: italic;
    color: var(--color4);
    opacity: 0.75;
    user-select: none;
}

.tag {
    display: inline-flex;
    justify-content: flex-start;
    align-items: stretch;
    background: var(--color2);
    padding: 2px 12px 2px 4px;
    gap: 6px;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
    transition: 0.2s;
}

.tag:has(i:hover) {
    filter: brightness(1.1);
}

.tag .tagLabel {
    text-transform:lowercase;
    font-weight: 900;
    font-family: beaufort-pro;
    color: var(--color4);
    font-size: 16px;
    line-height: 16px;
    user-select: none;
    display:flex;
    justify-content: flex-start;
    align-items: center;
}

.tag i {
    cursor: pointer;
    font-size: 16px;
    line-height: 16px;
    color: var(--color4);
    transition: 0.2s;
}

.tag i:hover {
    color: var(--color3);
}

.tag-container input[type="text"],.search-container input[type="text"] {
    appearance: none;
    background: none;
    height:100%;
    outline: none;
    border: none;
    background: none;
    font-size: 16px;
    line-height:16px;
    font-family: "Roboto Condensed";
    color: var(--color4);
    flex-grow: 1;
    border-bottom: 2px dashed transparent;
    transition: 0.2s;
}

.tag-container input[type="text"]:hover,.search-container input[type="text"]:hover {
    border-bottom: 2px dashed var(--color2);
}
.searchBar .heading{
    font-family: beaufort-pro;
    font-weight: 900;
    font-size: 16px;
    color: var(--color4);
}

.search-button{
    cursor: pointer;
    width:min-content;
    align-self: flex-end;
    font-family: beaufort-pro;
    font-weight:900;
    text-transform: uppercase;
    background: var(--color3);
    box-shadow: 2px 2px 0px 0px var(--color4);
    border: 3px solid var(--color2);
    color: var(--white);
    position:relative;
    padding: 2px 8px;
    transition: 0.2s;
    user-select: none;
}

.search-button:hover{
    box-shadow: 3px 3px 0px 0px var(--color4);
    border: 3px solid var(--color2);
}

.search-button:active{
    box-shadow: 2px 2px 0px 0px var(--color4);
}

.filter-button {
    cursor: pointer;
    transition:0.2s;
}

.filter-button:hover{
    color: var(--color3);
}