@import "fonts.css";
@import "base.css";
@import "header-footer.css";
@import "bricks.css";

/*------------------------*/
/* theme colors
/*------------------------*/

:root {
    --textDarker: #1e282d;
    --textDark: rgba(38, 50, 56, 1);
    --textMedium: rgba(38, 50, 56, 0.7);
    --borderMedium: rgba(38, 50, 56, 0.2);
    --borderLight: rgba(38, 50, 56, 0.075);
    --accent: #f4b500;
    --accentDarker: #e6ac00;
    --light: rgba(38, 50, 56, 0.035);
}
/*------------------------*/
/* turn grayscale off
/*------------------------*/

img {filter: grayscale(0);}

/*------------------------*/
/* colorize_image
/*------------------------*/

.colorize_image {filter: contrast(1) sepia(1) hue-rotate(160deg) grayscale(0.8)!important;}

/*------------------------*/
/* black_2_textDark
/*------------------------*/

.map::after, .black_2_textDark {filter: contrast(0.7) sepia(1) hue-rotate(160deg)!important;}

/*------------------------*/
/* black_2_textMedium
/*------------------------*/

.black_2_textMedium {filter: contrast(0.3) sepia(0.3) hue-rotate(160deg) brightness(1.4)!important;}

/*------------------------*/
/* black_2_accent
/*------------------------*/

/* .black_2_accent {filter: contrast(0.11) sepia(1) hue-rotate(340deg) contrast(13)!important;} */


/*------------------------ CSS overrides below ------------------------*/

section.image .twocols .image img {
    border-radius: 0rem;
}

.mobile-only-button {
    display: none;
}
  
@media (max-width: 570px) {
.mobile-only-button {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}
}

section.image.alt .image img {
    width: 80%;
}

ul.tabs li a::after {
    background: var(--accent);
}

.button, button {
    color: var(--textDark);
}

.button.icon img {
    filter: invert(0);
}

@media (max-width: 570px) {
    header + section:not(.bgimage) {
        padding-top: 8rem!important;
    }
}

/* Alternative approach: Use flexbox for better control over wrapping behavior */
ul.grid.features {
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    justify-content: center;
}

ul.grid.features li {
    flex: 1 1 20rem;
    max-width: 20rem;
    min-width: 20rem;
}

/* Style pricing info as distinct cards */
ul.grid.features li p em {
    display: block;
    background: var(--light);
    border: 1px solid var(--borderLight);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin: 1.5rem 0 0 0;
    text-align: center;
    font-style: normal;
    font-weight: 500;
    color: var(--textDark);
}

ul.grid.features li p em strong {
    color: var(--textDark);
    font-weight: bold;
}

/* Hide the filter dropdown on services page */
section.posts .filter {
    display: none;
}

/* Reduce spacing between description and services grid */
section.posts .container.small + .container {
    margin-top: -3rem;
}

/* Increase width of specialties overview paragraph */
section.title .container {
    max-width: 800px;
}

/* Reduce spacing between FAQ description and questions */
section.title + section.wide {
    margin-top: -2rem;
}

/* Clean styling for background/education list */
.container h3 + ul {
    list-style: none;
}

.container h3 + ul li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--borderLight);
    position: relative;
    padding-left: 1rem;
}

.container h3 + ul li:last-child {
    border-bottom: none;
}

.container h3 + ul li::before {
    content: "• ";
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: bold;
}