/* General */
    :root {
        --white: #fff;
        --black: #000;
        --grey: #F5F5F5;
        --dark-grey: #444;
        --blue: #0559CF;
        --orange: #EF830D;
        --red: #F91801;
        --green: #7FC629;
        --cyan: #18ACE9;
        --emerald: #009801;
        --teal: #019998;
    }
    .black { --active-color: var(--black); }
    .blue { --active-color: var(--blue); }
    .cyan { --active-color: var(--cyan); }
    .dark-grey { --active-color: var(--dark-grey); }
    .emerald { --active-color: var(--emerald); }
    .green { --active-color: var(--green); }
    .grey { --active-color: var(--grey); }
    .orange { --active-color: var(--orange); }
    .red { --active-color: var(--red); }
    .teal { --active-color: var(--teal); }
    .white { --active-color: var(--white); }

    *:focus {
        outline: 2px solid rgba(0,0,255,0.3);
    }
    body {
        background: var(--white);
        padding: 0px;
        margin: 0px;
        font-family: 'Arial';
        color: var(--dark-grey);
        box-sizing: content-box;
        background-size: cover;
        height: 100vh;
        width: 100vw;
        overflow-x: hidden;
    }
    a {
        text-decoration: none;
        outline: none;
        color: var(--active-color);
    }
    a:is(:hover, :focus, :active)
    {
        text-decoration: underline;
    }
    .full-width { width: 100%; }
    img.full-width {
        height: auto;
    }
    .col.box {
        padding: 20px;
    }
    .col.box h1, .col.box h2, .col.box h3, .col.box h4, .col.box h5, .col.box h6 {
        text-align: center;
    }
    .col.box .row {
        padding: 10px;
        box-shadow: 0 0 4px rgba(0,0,0,0.5);
    }
    .col.box.black .row { border: 2px solid var(--black); }
    .col.box.blue .row { border: 2px solid var(--blue); }
    .col.box.cyan .row { border: 2px solid var(--cyan); }
    .col.box.dark-grey .row { border: 2px solid var(--dark-grey); }
    .col.box.emerald .row { border: 2px solid var(--emerald); }
    .col.box.green .row { border: 2px solid var(--green); }
    .col.box.grey .row { border: 2px solid var(--grey); }
    .col.box.orange .row { border: 2px solid var(--orange); }
    .col.box.red .row { border: 2px solid var(--red); }
    .col.box.teal .row { border: 2px solid var(--teal); }
    .col.box.white .row { border: 2px solid var(--white); }

    .col.box div:has(.edit-accordion, .delete-btn) {
        text-align: center;
    }
    .btn.lg {
        width: 100%;
    }
    .btn {
        background: var(--active-color, var(--white));
        color: var(--white);
        font-size: 1.1rem;
        font-weight: 600;
        text-transform: uppercase;
        border: 2px solid var(--active-color);
        padding: 10px;
    }
    .btn:hover, .btn:focus, .btn:active {
        background: var(--active-color, var(--blue));
        color: var(--white);
        border: 2px solid var(--active-color);
    }
    .btn.red, .btn.blue, .btn.green {
        color: var(--white);
    }
    .btn:is(:hover, :focus, :target) {
        background: var(--white);
        color: var(--active-color, var(--blue));
    }
    #accordions .delete-btn,
    #sections .delete-btn {
        background: var(--red);
        color: var(--white);
        border: 2px solid var(--red);
    }
    #accordions .delete-btn:is(:hover, :focus, :target),
    #sections .delete-btn:is(:hover, :focus, :target) {
        background: var(--white);
        color: var(--red);
    }
    button#delete-confirm.btn.green:is(:hover, :focus, :target) {
        color: var(--green);
        border: 2px solid var(--green);
        background: var(--white);
    }
    .back-btn {
        position: relative;
    }
    .back-btn::after {
        content: "";
        position: absolute;
        top: 30%;
        left: -30px;
        font-size: 1.25em;
        font-weight: 600;
        color: var(--blue);
        border-bottom: 5px solid var(--blue);
        border-right: 5px solid var(--blue);
        height: 15px;
        width: 15px;
        transform: rotate(135deg);
    }
    .mobile-show {
        display: none;
    }
    .align-center { text-align:  center; }
    .align-left { text-align:  left; }
    .align-right { text-align:  right; }
    ul.headless {
        list-style: none;
    }
    h1, h2, h3, h4, h5, h6 {
        color: var(--active-color);
        font-weight: 900;
    }
    p {
        font-size: 1.1rem;
    }
    h1.color-bar, h2.color-bar, h3.color-bar, h4.color-bar, h5.color-bar, h6.color-bar {
        position: relative;
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    h1.color-bar::after, h2.color-bar::after, h3.color-bar::after, h4.color-bar::after, h5.color-bar::after, h6.color-bar::after
    {
        content: "";
        display: block;
        height: 2px;
        flex: 1;
        background: var(--active-color);
    }


/* Header */
    header {
        background: var(--white);
        padding: 10px;
    }
    header nav {
        padding: 20px;
    }
    header nav ul {
        list-style: none;
    }
    header nav ul li {
        text-align: center;
    }
    header nav ul li a {
        color: var(--black);
        font-weight: 500;
    }
    header .assist,
    header .donate {
        padding: 15px 20px;
        border-radius: 15px;
    }
    header .assist {
        background: var(--blue);
        border: 2px solid var(--blue);
        color: var(--white);
    }
    header .donate {
        background: var(--red);
        border: 2px solid var(--red);
        color: var(--white);
    }
    header .assist:is(:hover, :focus, :target, :active) {
        text-decoration: none;
        background: var(--white);
        color: var(--blue);
    }
    header .donate:is(:hover, :focus, :target, :active) {
        text-decoration: none;
        background: var(--white);
        color: var(--red);
    }


/* Main */
    main {
        position: relative;
        width: 100%;
        height: 100%;
    }



/* Footer */
    footer {
        position: absolute;
        background: rgba(255,255,255,0.85);
        width: 100%;
        left: 0;
        border-radius: 25px;
        bottom: -30%;
        padding: 0;
    }
    #footer-btm {
        background: var(--active-color);
        color: var(--white);
        position: relative;
        border-radius: 0 0 25px 25px;
    }
    #footer-btm::after {
        content: "";
        display: block;
        width: 100%;
        height: 15px;
        border-radius: 0 0 25px 25px;
        background: var(--white);
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0.9;
    }
    #footer-socials strong {
        font-weight: 900;
        color: var(--white);
    }
    #footer-socials a {
        display: inline-block;
        background: var(--white);
        border-radius: 50%;
        border: 2px solid var(--white);
        padding: 10px;
        width: 40px;
        height: 40px;
        position: relative;
        top: 20%;
        margin-left: 10px;
    }
    #footer-socials a svg {
        fill: var(--blue);
        width: 30px;
        height: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    #footer-socials a:is(:hover, :focus, :target, :active) {
        background: var(--blue);
        border: 2px solid var(--white);
    }
    #footer-socials a:is(:hover, :focus, :target, :active) svg {
        fill: var(--white);
    }
    #copyright p {
        position: relative;
        top: 30%;
        font-size: 0.9rem;
    }
    footer .icon i {
        font-size: 4rem;
        color: var(--blue);
    }
    footer .info {
        position: relative;
        color: var(--black);
    }
    footer .info p {
        width: 80%;
    }
    footer .info::after {
        content: "\203A";
        display: block;
        position: absolute;
        height: 10px;
        width: 10px;
        right: 5%;
        top: 0;
        font-size: 3rem;
        color: var(--blue);
    }



/* Forms */
    input, select, textarea {
        background: var(--white);
        padding: 10px;
        color: var(--dark-grey);
        border: 2px solid var(--blue);
        outline: 0;
        width: 100%;
        margin-bottom: 10px;
    }
    input[type="submit"] {
        --active-color: var(--blue);
        background: var(--blue);
        color: var(--white);
        text-transform: uppercase;
        font-weight: 600;
        font-size: 1.2rem;
    }
    input[type="submit"], .btn {
        border-radius: 15px;
    }
    input[type="submit"]:is(:hover, :focus, :active) {
        background: var(--white);
        color: var(--blue);
    }
    .cms input, .cms select, .cms textarea {
        margin-bottom: 20px;
        border: 2px solid var(--blue);
    }
    .cms form {
        position: relative;
        padding: 20px;
        box-shadow: 0 0 4px rgba(0,0,0,0.4);
        border-radius: 15px;
        margin-bottom: 20px;
    }
    .cms select {
        border: 2px solid var(--blue);
    }
    .cms section {
        margin-bottom: 40px;
    }
    input[type="checkbox"] {
        width: initial;
    }
    .checkbox {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 20px;
        margin-top: 36px;
        cursor: pointer;
    }
    .checkbox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }
    .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        background-color: var(--red);
    }
    .checkbox input:checked ~ .checkmark {
        background-color: var(--emerald);
    }
    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }
    .checkbox input:checked ~ .checkmark:after {
        display: block;
    }
    .checkbox .checkmark:after {
        left: 9px;
        top: 5px;
        width: 5px;
        height: 10px;
        border: solid var(--white);
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    input[type="file"] {
        border: 2px solid var(--blue);
        padding: 0;
        color: var(--blue);
    }
    input[type="file"]::file-selector-button {
        background: var(--blue);
        color: var(--white);
        padding: 20px;
        width: 50%;
        border: solid var(--blue);
        border-width: 0 2px 0 0;
        margin-right: 10px;
        cursor: pointer;
    }
    .county_selector_wrapper {
        background: var(--white);
    }
    #edit-box {
        display: none;
    }
    #edit-box.visible {
        display: block;
    }
    #delete-box {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(255,255,255,0.5);
        z-index: 2;
    }
    #delete-box.visible {
        display: block;
    }
    #delete-box .container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        max-width: 600px;
        background: var(--grey);
        color: var(--black);
        padding: 20px;
        box-shadow: 0 0 4px rgba(255,0,0,0.5);
        z-index: 3;
    }
    .success, .errors {
        background: var(--emerald);
        padding: 20px;
        text-align: center;
        line-height: 1.4;
    }
    .errors {
        background: var(--dark-grey);
    }
    .success p, .success strong, .success a, .errors p, .errors strong, .errors a {
        color: var(--white);
        margin: 0;
        padding: 0;
    }
    .success strong, .errors strong {
        text-transform: uppercase;
        font-size: 1.2rem;
    }
    .success a,
    .errors a {
        font-weight: 700;
    }
    .success a:hover, .success a:active, .errors a:hover, .errors a:active {
        font-weight: 900;
        color: var(--black);
    }


/* Home */
    body:has(#home) {
        background: url("/img/graphics/background.webp") no-repeat;
        background-size: cover;
        height: 120vh;
    }
    main #home {
        position: relative;
        top: 30px;
        background: rgba(255, 255, 255, 0.85);
        border-radius: 25px;
        padding: 20px;
    }
    #home select {
        border: 0;
    }
    #county_selector {
        width: 90%;
        padding-left: 5px;
        font-weight: 900;
    }
    label[for="county_selector"], #county_selector {
        font-size: 1.2rem;
    }
    .service-btn {
        width: 100%;
        background: var(--white);
        border: 0;
        position: relative;
        margin-bottom: 20px;
        box-shadow: 0 10px 10px rgba(0,0,0,0.2);
        z-index: 2;
        padding: 0;
        border: 0;
    }
    .btn.service-btn:is(:focus, :hover, :target, :active) {
        background: var(--white);
        border: 0;
    }
    .btn.service-btn:is(:focus, :hover, :target, :active) article {
        border: 5px solid var(--active-color);
    }
    .btn.service-btn:is(:focus, :hover, :target, :active),
    .btn.service-btn:is(:focus, :hover, :target, :active) a,
    .btn.service-btn a:is(:focus, :hover, :target, :active) {
        text-decoration: none;
    }
    .service-btn::before {
        content: "";
        position: absolute;
        bottom: -10px;
        left: 0;
        display: block;
        width: 100%;
        height: 104%;
        background: var(--active-color);
        border: 0;
        z-index: -2;
        border-radius: 15px;
    }
    .service-btn article {
        border: 0;
        padding: 10px;
        border: 5px solid var(--white);
        border-radius: 15px;
    }
    .service-btn h3 {
        font-size: 1.1rem;
        color: var(--black);
        font-weight: 600;
        text-transform: capitalize;
    }
    .service-btn figure {
        width: 150px;
        height: 150px;
        overflow: hidden;
        position: relative;
        margin: 0 auto;
    }
    .service-btn figure img {
        width: 80%;
        height: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    #home .accordion-item {
        background: transparent;
        border: 0;
    }
    #home .accordion-button {
        width: 30%;
        margin: 0 auto;
        text-align: center;
        text-transform: uppercase;
        background: var(--blue);
        color: var(--white);
        font-weight: 900;
        padding: 20px;
    }
    #home .accordion-button::after {
        color: var(--white);
        font-weight: 900;
        position: absolute;
        right: 16px;
    }
    #home .accordion-button:not(.collapsed)::after {
        background-image: url("/img/graphics/chevron-up.svg");
        transform: rotate(360deg);
    }
    #home .accordion-button.collapsed::after {
        background-image: url("/img/graphics/chevron-down.svg");
    }


/* Services */
    body:has(#service) {
        background: url("/img/graphics/background.webp") no-repeat;
        background-size: cover;
        height: 200vh;
    }
    #hero {
        display: block;
        position: relative;
        width: 100%;
        height: 300px;
        overflow: hidden;
        margin-bottom: 10px;
        border-bottom: 10px solid var(--active-color);
        box-sizing: content-box;
    }
    #hero img {
        position: absolute;
        width: 100%;
        height: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    #service .container {
        background: var(--white);
        overflow-y: auto;
    }
    body:has(#service) footer {
        position: relative;
        width: 94%;
        left: 3%;
        bottom: -10px;
    }
    body:has(#service) footer #footer-btm {
    }
    #service h1,
    #service h2,
    #service h3,
    #service h4,
    #service h5,
    #service h6,
    #service strong,
    #service a {
        color: var(--active-color);
    }
    #service h2 {
        font-size: 1.5rem;
    }
    #service-info .col {
        margin-bottom: 40px;
    }
    #service .accordion-item {
        background: transparent;
        border: 0;
        border-radius: 15px;
    }
    #service .accordion-button {
        width: 100%;
        margin: 0 auto;
        text-align: left;
        text-transform: uppercase;
        background: var(--grey);
        color: var(--black);
        font-weight: 900;
        margin-bottom: 15px;
        border-radius: 15px;
        padding: 20px;
        box-shadow: 0 0 2px rgba(0,0,0,0.4);
    }
    #service .accordion-button::after {
        color: var(--white);
        font-weight: 900;
        position: absolute;
        right: 16px;
    }
    #service .accordion-button:not(.collapsed) {
        background: var(--active-color);
        color: var(--white);
    }
    #service .accordion-button:not(.collapsed)::after {
        background-image: url("/img/graphics/chevron-down.svg");
        transform: rotate(360deg);
    }
    #service .accordion-button.collapsed::after {
        background-image: url("/img/graphics/chevron-right.svg");
    }
    #service .accordion-item figure {
        width: 100%;
        height: 200px;
        overflow: hidden;
        position: relative;
    }
    #service .accordion-item figure img {
        height: 100%;
        width: auto;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }
    #scroll-up {
        display: none;
        position: fixed;
        bottom: 20px;
        right: 30px;
        z-index: 99;
        border: none;
        outline: none;
        background: var(--blue);
        color: var(--white);
        cursor: pointer;
        padding: 15px;
        border-radius: 15px;
        font-size: 1.5rem;
        opacity: 0.8;
    }
    #scroll-up.visible {
        display: block;
    }
    #scroll-up:hover {
        background: var(--green);
    }


/* Quick Links */
    .quick-links h2 {
        background: var(--active-color);
        color: var(--white) !important;
        font-weight: 600;
        text-align: center;
        padding: 10px;
        border-radius: 15px;
    }
    .quick-links ul {
        list-style: none;
    }
    .quick-links ul li {
        border-bottom: 2px solid var(--grey);
        position: relative;
    }
    .quick-links ul li a {
        display: block;
        padding: 10px;
    }
    .quick-links ul li::after {
        content: "";
        display: block;
        position: absolute;
        right: 16px;
        top: 30%;
        width: 20px;
        height: 20px;
        background-image: url("/img/graphics/chevron-right.svg");
        background-repeat: no-repeat;
    }
    #service .quick-links a {
        color: var(--black);
    }
    #service-contact {
        margin-bottom: 20px;
    }
    #service-contact h3 {
        font-size: 1.5rem;
    }



/* CMS */
    #pages-nav {
        border: 2px solid var(--blue);
    }
    form.cms-link {
        border: 2px solid var(--blue);
        margin: 10px 0;
        padding: 10px;
        cursor: pointer;
    }
    form.cms-link .sort-btn {
        background: var(--white);
    }
    form.cms-link .sort-btn i {
        color: var(--blue);
        font-size: 2.5rem;
    }
    form.cms-link .sort-btn:hover i {
        color: var(--green);
    }


/* Mobile Menu */
    .mobile-menu-switch {
        display: block;
        width: 100%;
        text-align: center;
    }
    header .logo a {
        display: block;
    }



/* Responsive */
    /* Phones and Lower Res Tablets */
        @media only screen and (max-width: 767px) {
            .mobile-hide {
                display: none;
            }
            .mobile-show {
                display: block;
            }
            body {
                height: 100%;
                width: 100%;
                overflow-y: auto;
            }
            .menu-container {
                display: none;
                position: fixed;
                z-index: 100;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: var(--blue);
            }
            .menu-container.visible {
                display: block;
            }
            .menu-container figure {
                width: 80%;
                margin: 10px auto;
            }
            .menu-container .nav-link {
                width: 100%;
                padding: 10px;
                font-size: 1.5rem;
            }
            .menu-container .nav-link a,
            .menu-container .nav-link a:is(:hover, :focus, :target, :active) {
                color: var(--white);
            }
            .menu-container .assist,
            .menu-container .donate {
                padding: 0;
                border-radius: 15px;
            }
            .menu-container .assist,
            .menu-container .donate {
                background: none;
                border: 0;
                color: var(--white);
            }
            .menu-container .assist i,
            .menu-container .donate i {
                display: none;
            }
            main #home {
                position: relative;
                left: 0;
                top: 0;
                transform: none;
                width: 100%;
                border-radius: 0;
            }
            footer {
                position: relative;
                bottom: -10px;
            }
            #footer-btm {
                border-radius: 0;
            }
            #home .accordion-button {
                width: 100%;
            }
            #hero {
                height: 200px;
            }
            #hero img {
                width: auto;
                height: 100%;
            }
        }


    /* Tablet */
        @media (min-width: 768px) and (max-width: 1023px) {
            #home.container {
                max-width: 100%;
            }
            footer {
                position: relative;
                width: 104%;
                left: -2%;
                bottom: -20px;
            }
        }

    /* Desktop */
        @media (min-width: 1440px) {
        }

    /* Landscape */
        @media (orientation: landscape) {
            body {
                overflow-x: auto;
            }
        }