/* 
The styling in this file is meant to be modular and page-agnostic. 
More hierarchical or single-use designs should be put in pages.css. 

Before January 2026, this was a spaghetti mess of often redundant and overlqpping
classes, most of which I've moved to legacy.css or pages.css. Ideally, these will be 
used instead going forward. 
*/

.emphasis-line-alt {
    margin:0; 
    font-size: 1.25em; 
    background:var(--color-whiteteal); 
    padding: 0.5em;
}

.bg-light-gray {background: #eee;}
.bg-white {background: #fff;}
.bg-lighter-blue {background: var(--color-whiteteal);}
.bg-light-blue {background: var(--color-paleteal);}
.bg-dark-blue {background: var(--color-darkteal);}
.bg-darker-blue {background: var(--color-blackteal);}
.bg-black {background: #000;}

.round-01em {border-radius:0.1em;}
.round-025em {border-radius:0.25em;}
.round-05em {border-radius:0.5em;}

.no-margin {margin:0;}
.no-padding {padding:0;}
.no-list-style {list-style:none;}

.emphasis {
    text-align:center;
    font-weight:bold;
    font-size:1.5em;
}

.grid-2x1 {
    display:grid;
    grid-template-rows: 1fr auto;
    grid-template-columns: 1fr 1fr;
}
.grid-2x2 {
    display:grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
}
.grid-3x1 {
    display:grid;
    grid-template-rows: 1fr auto;
    grid-template-columns: repeat(3,1fr);
}
.grid-4x1 {
    display:grid;
    grid-template-rows: 1fr auto;
    grid-template-columns: repeat(4,1fr);
}
.grid-8x1 { /* same ratio as the footer layout */
    display:grid;
    grid-template-rows: 1fr auto;
    grid-template-columns: repeat(8,1fr);
}
.grid-11x1 { /* same ratio as the front page main content block */
    display:grid;
    grid-template-rows: 1fr auto;
    grid-template-columns: repeat(11,1fr);
}

.flex-column {
    display:flex;
    gap:1em;
    flex-flow: column wrap;
}
.flex-row {
    display:flex;
    gap:1em;
    flex-flow: row wrap;
}

.link-deco {text-decoration :none;}
.link-deco:hover,
.link-deco:focus {
    text-decoration:underline;
}

/*----------------------------------------------
Old styling that still seemed to fit in this file and could be reused
-----------------------------------------------*/

.huge-teal-button-link {
    text-align:center;
    font-size:1.5em;
    padding: 0.3em 1em;
    font-weight:bold;
    color:white !important;
    background-color:var(--color-darkteal);
    text-decoration:none;
    border-radius: 0.1em;
    
    :hover,
    :focus {
        background-color: var(--color-darkerteal);
        color:var(--color-paleteal) !important;
        text-decoration:underline;    
    }
}

.spaced-paragraph {
    padding: 3em 0;
    
    h2 {
        padding-bottom:0.5em;
    }
}

/*used on bowling alley news page */
@media (min-width: 768px){
    .image-four-row {
        display: grid;
        grid-template-columns: repeat(4,1fr);
    }
}
@media (max-width: 767px){
    .image-four-row {
        display:flex;
        gap:1em;
        flex-direction:column;
    }
}
.image-four-row img {
    object-fit:cover;
    height:250px !important;
    width:250px !important;
    display:block;
}

/* --- */
/*used for staff and board lists */
@media (min-width: 768px) {
    .two-columns {
        display:grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto 1fr auto;
    }
    .column-one {
        grid-column-start: 1/2;
    }
    .column-two {
        grid-column-start: 2/3;
    }
}
.small-right-image {
    width:400px !important;
    text-align: right;
    float:right !important;
    margin-left:0.5em;
}
.small-right-image figcaption {
    color:var(--color-darkteal);
}
/*human services training page comcorp logo*/
.quarter-image {
    width:25% !important;
}