/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');



/* body */
.w3-dropdown-content {
    display: none;
}

.w3-dropdown-content.is-open {
    display: block;
}

a:focus {
    outline: 2px solid #c5050c;
    outline-offset: 4px;
}

body {
    padding: 0;
    margin: 0;
    font-size: 18px;
    background-color: #fff;
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

p,
h1,
h2,
h3,
h4,
h5,
b,
div,
a,
i {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    line-height: 1.6;
}

i,
em {
    font-style: italic;
}

.bg-badger-red {
    background-color: #C5050C;
}

.txt-badger-red {
    color: #C5050C;
}

.link-badger-red {
    color: #C5050C;
    text-decoration: none;
}

.link-badger-red:hover {
    text-decoration: underline;
}

.content-block {
    max-width: 1000px;
    margin: 0 auto;
}

.raleway-300 {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

.raleway-500 {
    font-weight: 500;
}

.raleway-700 {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

main {
    flex: 1;
}

.bg-badger-red {
    background-color: #C5050C;
}

.link-badger-red {
    color: #C5050C;
    text-decoration: none;
}

.link-badge-white {
    color: white;
    text-decoration: none;
}

.link-blue {
    color: #13497e;
    text-decoration: underline;
}

.link-blue-no-line {
    color: #13497e;
    text-decoration: none;
}

.main-header {
    font-size: 3rem;
    font-weight: 300;
}


.garden-header {
    font-size: 2rem;
    font-weight: 300;
}

.filter-header {
    font-size: 1.5rem;
    font-weight: 300;
    padding: 0 10px;
}


/* skips to main content - bypass nav */
.skip-link {
    position: absolute;
    left: -9999px;
}

.skip-link:focus {
    left: 10px;
    top: 10px;
    background: #fff;
    padding: 8px;
    z-index: 1000;
}

/* header */
.header-logo-desktop {
    height: 50px;
    width: auto;
}

.hero_nav {
    font-size: 1.15rem;
    font-weight: 400;
    text-decoration: none;
}

/* footer */

.footer-uw-logo {
    height: 150px;
    width: auto;
}

.footer-background-dark-gray {
    background-color: #333;
}


/* individual plant view */

.big-picture {
    width: 100%;
    height: auto;
}


.plant-txt {
    font-size: 1.3rem;
}

.flex-plant-viewer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    overflow: scroll;
}

.flex-plant-viewer div {
    width: 100px;
    margin: 10px;
}

/* use square-image for thumbnail gallery */

/* garden map */

.garden-map {
    max-width: 1000px;
}

.map-svg {
    width: 100%;
    height: auto;
}

.map-circle {
    fill: #c40000;
    stroke: #fff;
    stroke-width: 3;
    cursor: pointer;
    overflow: visible;
}

.map-circle:hover {
    fill: #ff0000;
}

.map-number {
    fill: #fff;
    font-size: 13px;
    font-weight: bold;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
}

a:focus .map-circle {
    stroke: yellow;
    stroke-width: 5;
}


.highlight-circle-svg {
    fill: none;
    fill: #ff0000;
}


/* garden list below map */
.three-column-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    columns: 3;
    column-gap: 10px;
}

.four-column-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    columns: 4;
    column-gap: 20px;
}

.three-column-list li,
.four-column-list li {
    break-inside: avoid;
}

.label-align-vertical {
    vertical-align: middle;
}

/* garden tables */

.square-image {
    width: 100px;
    /* Set a fixed width */
    height: 100px;
    /* Set a fixed height (same as width for a square) */
    object-fit: cover;
    /* Crop the image to cover the entire space */
    aspect-ratio: 1;
    /* Ensures the element remains square if only one dimension is defined*/
}




@media (max-width: 768px) {


    /* garden list below map */
    .three-column-list {
        list-style-type: none;
        /* Removes default bullet points */
        padding: 0;
        /* Removes default padding */
        margin: 0;
        /* Removes default margin */

        /* Create three columns */
        columns: 1;
        /* Can also use column-count: 3; */
        column-gap: 0;
        /* Adds space between columns */
    }

    .map-number {
        font-size: 2.5rem;
    }

    .main-header {
        font-size: 2rem;
        font-weight: 300;
    }


    .garden-header {
        font-size: 1.5rem;
        font-weight: 300;
    }

    .filter-header {
        font-size: 1.25rem;
        font-weight: 300;
        padding: 0 10px;
    }


}