/* =============================================================================
   DANR.SD.GOV — MAIN STYLESHEET
   Organized for WCAG 2.1 Level AA Compliance
   Last Updated: 2026
   
   TABLE OF CONTENTS
   -----------------
   01. CSS Custom Properties (Variables)
   02. Base / Reset
   03. Accessibility Utilities
       – Skip link
       – Focus indicators (:focus-visible, a:focus, button:focus)
       – .section-toggle (accordion buttons)
       – .btn-default contrast fix
       – .expand-instructions
   04. Scrollbar
   05. Layout — Grid & Containers
   06. Typography & Headings
   07. Links
   08. Buttons
   09. Forms & Search Bar
   10. Navigation — Navbar
   11. Navigation — Dropdown Menus
   12. Navigation — Offcanvas / Mobile
   13. Navigation — Side Nav
   14. Cards
   15. Carousel
   16. Modals
   17. Tables
   18. Lists
   19. Badges
   20. Footer
   21. Utility / Helper Classes
   22. Animations
   23. Media Queries
   24. SCBG — Previously Funded Projects Component
   ============================================================================= */


/* =============================================================================
   01. CSS CUSTOM PROPERTIES (VARIABLES)
   ============================================================================= */

:root {
    --color-primary: #064A60;
    --color-primary-dark: #086788;
    --color-primary-mid: #284b63;
    /* Lighter, ADA-compliant green accent */
    --color-accent: #A4D65E; /* lighter and more vibrant green */
    --color-accent-hover: #92C84B; /* slightly darker for hover state */
    --color-accent-on-dark: #C6E77D; /* lighter variant for text on dark backgrounds */

    --color-danger: #c82333 !important;
    --color-danger-text: #721c24 !important;
    --color-bg-light: #f8f9fa;
    --color-bg-info: #EBFDFF;
    --color-bg-green: #CFF2A5; /* lighter green background */
    --color-text-muted: #b9c0c8; /* kept for 4.5:1 contrast with primary bg */
    --color-white: #FFF;
    --color-border-light: lightgrey;
    --color-scrollbar-track: #064A60;
    --color-scrollbar-thumb: #A4D65E; /* matches accent */

    --font-heading: aglet-slab, sans-serif;
    --font-body: quasimoda, sans-serif;
}



/* =============================================================================
   02. BASE / RESET
   ============================================================================= */

body {
    max-width: 100vw;
}

/* Remove tap highlight on interactive elements.
   NOTE: user-select:none is intentionally NOT applied to <a> elements —
   removing text selection from links breaks copying for keyboard and
   assistive-technology users (WCAG 2.1 SC 1.3.1 / 2.1.1). */
button,
textarea,
input,
select {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}

/* Non-text interactive controls may suppress selection, but NOT anchors */
button {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

ul {
    list-style-type: none;
}


/* =============================================================================
   03. ACCESSIBILITY UTILITIES
   ============================================================================= */

/* Skip navigation link — visually hidden until focused */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px;
    z-index: 9999;
    text-decoration: underline;
}

    .skip-link:focus {
        top: 0;
    }

/* Visible focus indicators for keyboard navigation.
   The a:focus / button:focus rules below act as a fallback for browsers
   that do not support :focus-visible (e.g. older Safari / IE).
   Modern browsers use :focus-visible so the ring only appears for
   keyboard/AT navigation, not mouse clicks (WCAG 2.4.7). */
a:focus,
button:focus {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 3px;
}


/* -----------------------------------------------------------------------------
   Section-toggle buttons (accordion / collapse controls)
   Used on pages such as Conservation Districts Restricted (default.aspx) where
   Bootstrap heading links have been replaced with accessible <button> elements.
   WCAG: 4.1.2 (Name, Role, Value), 1.3.3 (Sensory Characteristics), 2.4.7 (Focus)
   ----------------------------------------------------------------------------- */

/* Base button — matches the visual style of the site's .heading class */
.section-toggle {
    display: inline-block;
    background: none;
    border: 2px solid transparent;
    cursor: pointer;
    font-family: inherit;
    padding: 0.25rem 0.5rem;
    margin: 0 1.5rem 1rem;
    border-radius: 4px;
    text-decoration: underline;
}

/* Chevron indicator — CSS unicode escape avoids encoding issues on
   non-UTF-8 ASP.NET pages (\25BC = ▼). */
.section-toggle::after {
    content: ' \25BC';
    font-size: 0.65em;
    transition: transform 0.2s ease;
    display: inline-block;
    margin-left: 0.35rem;
    vertical-align: middle;
}

/* Rotate chevron when section is expanded */
.section-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}


/* -----------------------------------------------------------------------------
   .btn-default contrast fix
   Bootstrap's default .btn-default grey text on white is ~3.9:1 — fails
   WCAG 1.4.3 AA for normal-size text. Override to dark text on light grey,
   with a high-contrast hover/focus state.
   ----------------------------------------------------------------------------- */
.btn.btn-default {
    color: #92C84B;
    background-color: #064A60;
    border: 1px solid #086788;
}

.btn.btn-default:hover,
.btn.btn-default:focus {
    color: #ffffff;
    background-color: #064A60;
    border: 2px solid #92C84B;
    text-decoration: none;
    transition: ease-in .9;
}


/* -----------------------------------------------------------------------------
   .expand-instructions
   Italic helper text shown above accordion sections to tell users they can
   click the headings to expand content. Used on pages with collapsed sections.
   ----------------------------------------------------------------------------- */
.expand-instructions {
    font-style: italic;
    color: #333333;
    margin-top: 0.5rem;
}


/* =============================================================================
   04. SCROLLBAR
   ============================================================================= */

/* Width */
::-webkit-scrollbar {
    width: 10px;
    cursor: pointer !important;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--color-scrollbar-track);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--color-scrollbar-thumb);
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background-color: var(--color-accent);
    }


/* =============================================================================
   05. LAYOUT — GRID & CONTAINERS
   ============================================================================= */

.container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.row {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.col {
    padding-left: 0;
    padding-right: 0;
}

.group {
    width: 100%;
    margin-bottom: 50px;
}

.row-offcanvas {
    min-height: calc(100vh - 120px);
}


/* =============================================================================
   06. TYPOGRAPHY & HEADINGS
   ============================================================================= */

/* Public Notices page */
.notice-filing-alert {
    color: #721c24;
    font-weight: bold;
}

.public-notice-heading {
    font-size: 1rem;
    font-weight: bold;
    margin-top: 1.25rem;
    margin-bottom: 0.4rem;
}

.public-notice-disclaimer {
    margin-top: 2rem;
    font-style: italic;
}


.jumboheading {
    letter-spacing: .4rem;
    font-weight: 600;
    font-family: var(--font-heading);
    font-size: 2.3rem;
    color: var(--color-primary);
    border-bottom: 1px solid var(--color-accent);
    text-transform: uppercase;
}

.heading {
    letter-spacing: .4rem;
    font-weight: 600;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--color-primary);
    border-bottom: 1px solid var(--color-accent);
    text-transform: uppercase;
    text-decoration: none;
}

a .heading {
    letter-spacing: .4rem;
    font-weight: 600;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--color-primary);
    border-bottom: 1px solid var(--color-accent);
    text-transform: uppercase;
    text-decoration: none !important;
}

    a .heading:hover {
        font-family: var(--font-heading) !important;
        color: var(--color-primary-dark);
        text-decoration: none !important;
    }

    a .heading:active {
        color: var(--color-primary) !important;
        text-decoration: none !important;
    }

.title {
    font-weight: 600;
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--color-primary);
}

.title-link {
    font-weight: 600;
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--color-primary);
    text-decoration: none;
}

    .title-link:hover {
        color: var(--color-primary-dark);
        text-decoration: none;
    }

.title-header {
    font-weight: 600;
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--color-primary);
}

.titleb {
    font-weight: 600;
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--color-primary);
    padding: 15px;
    background-color: lightgray;
}

.title-warning {
    font-weight: 600;
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--color-danger-text);
}

.header-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-primary-mid);
    border-left: 3px solid;
}

.header-title2 {
    font-size: .8rem;
    font-weight: bold;
    color: var(--color-primary-mid);
}

/* NOTE: cursor:pointer is removed from generic h2/.title selectors.
   Headings are not interactive controls; applying pointer-cursor without
   role="button" misleads screen-reader and keyboard users (WCAG 4.1.2).
   Collapsible heading buttons should add cursor:pointer via their own class. */
h2 {
    /* no cursor override — inherits default */
}

.title {
    /* no cursor override — add .collapsible-trigger to headings that open/close panels */
}

.redtext {
    color: red;
    font-weight: bold;
}

.hrgreen {
    border: 1px solid var(--color-accent);
}


/* =============================================================================
   07. LINKS
   ============================================================================= */

/* Base rule: override Bootstrap's default #0d6efd (fails at 4.30:1 on bg-light,
   3.91:1 on striped rows). --color-primary-dark (#086788) passes at 5.63:1 on
   white, 5.52:1 on striped rows, and 6.07:1 on --color-bg-light. */
a {
    color: var(--color-primary-dark);
}

    a:hover {
        color: var(--color-primary-dark) !important;
        text-decoration: underline; /* WCAG 1.4.1 — maintain underline on hover */
    }

p a,
td a {
    font-weight: bold;
    cursor: pointer;
    color: var(--color-primary-dark); /* #086788 — 5.63:1 on white, 4.92:1 on striped row bg */
}

    p a:hover,
    td a:hover {
        font-weight: bold;
        cursor: pointer;
        color: var(--color-primary);
        text-decoration: underline; /* WCAG 1.4.1 — maintain underline on hover */
    }

.nav-link {
    color: var(--color-primary-dark);
    font-weight: bold;
    cursor: pointer;
}

    .nav-link:hover,
    .nav-link:active {
        color: var(--color-primary) !important;
    }

.uppernav .nav-link {
    color: var(--color-primary-dark);
}

    .uppernav .nav-link:hover {
        color: var(--color-primary) !important;
    }

.nav-linkb {
    color: var(--color-bg-light);
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    font-family: var(--font-body);
}

    .nav-linkb:hover {
        color: var(--color-accent);
        text-decoration: underline; /* WCAG 1.4.1 */
    }

.side-title {
    color: var(--color-primary);
    font-weight: bold;
    cursor: pointer;
}

    .side-title:hover {
        color: var(--color-primary-dark);
        font-weight: bold;
        text-decoration: underline; /* WCAG 1.4.1 */
    }


/* =============================================================================
   08. BUTTONS
   ============================================================================= */

.btn {
    background-color: var(--color-primary);
    color: #92C84B; /* was --color-accent (#4f772d) — contrast 1.81:1; now 4.74:1 */
    font-family: var(--font-body);
}

    .btn:hover {
        color: #e9ecef !important;
        background-color: var(--color-primary-dark);
        border: 2px solid #92C84B;
    }

.navbtn {
    background-color: var(--color-primary);
    border: var(--color-primary);
    color: #92C84B; /* was --color-accent (#4f772d) — contrast 1.81:1; now 4.74:1 */
    max-height: 36px;
}
.navbtn:hover {
        color: #e9ecef !important;
        background-color: var(--color-primary-dark);
        
    }

.navbar-brand {
    padding-left: 1.5%;
}

.logo {
    max-width: 85px !important;
}

button {
    border: none !important;
}


/* =============================================================================
   09. FORMS & SEARCH BAR
   ============================================================================= */

.inputfloat {
    position: absolute;
    right: 0;
    left: 0;
    top: -28px; /* Keeps search above the menu */
    z-index: 999;
}

.input-group {
    border: 5px solid var(--color-primary);
}

.form-control {
    font-family: var(--font-body);
    font-size: 1.7vw;
    font-weight: bold;
    color: var(--color-primary) !important;
}

    .form-control:focus {
        border: 2px solid var(--color-primary) !important; /* WCAG 2.4.7 — restore visible focus */
        box-shadow: 0 0 0 3px rgba(6,74,96,0.25) !important;
        outline: none;
    }

.input-group-text {
    background-color: white;
    border: none;
}

.input-group button {
    background-color: white;
    color: var(--color-primary);
}

    .input-group button:hover {
        background-color: white;
        color: var(--color-primary-dark);
    }

/* Google Custom Search Engine */
#___gcse_0 {
    display: block;
    width: 100%;
}

.gsc-input {
    background: none !important;
}

.gsc-search-button-v2 svg {
    fill: black !important;
}


/* =============================================================================
   10. NAVIGATION — NAVBAR
   ============================================================================= */

.fa-bars {
    color: white;
    opacity: 1;
}

/* Desktop hover state */
@media all and (min-width: 992px) {
    .navbar .nav-item:hover .nav-link {
        color: var(--color-primary);
    }

    .title-header {
        font-weight: 600;
        font-family: var(--font-heading);
        font-size: 1.3rem;
        color: var(--color-primary);
    }

    .jumboheading {
        letter-spacing: .4rem;
        font-weight: 600;
        font-family: var(--font-heading);
        font-size: 2.3rem;
        color: var(--color-primary);
        border-bottom: 1px solid var(--color-accent);
        text-transform: uppercase;
    }
}

/* Link inside navbar brand */
a .navbar-brand .title {
    font-weight: 600;
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--color-primary-dark);
}

    a .navbar-brand .title:hover {
        color: var(--color-primary-dark) !important;
        text-decoration: none !important;
    }


/* =============================================================================
   11. NAVIGATION — DROPDOWN MENUS
   ============================================================================= */

.dropdown-menu {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border: none !important;
    background-color: var(--color-bg-light) !important;
    padding: 0 0;
}

/* Standard dropdown item */
.dropdown-item {
    white-space: normal;
    border-bottom: 1px solid var(--color-accent);
    color: var(--color-primary-dark);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1rem;
    font-weight: bold;
    background: linear-gradient(to right, var(--color-accent) 50%, var(--color-bg-light) 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all .5s ease-out;
}

    .dropdown-item:hover {
        border-bottom: 1px solid var(--color-accent);
        color: #fff; /* was --color-primary-mid (#284b63) — 1.74:1 on --color-accent bg; #fff = 4.68:1 */
        background-position: left bottom;
    }

/* Compact dropdown item variant */
.dropdown-itemc {
    white-space: normal;
    border-bottom: 1px solid var(--color-accent);
    color: var(--color-primary-dark);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: .8rem;
    font-weight: bold;
    background: linear-gradient(to right, var(--color-accent) 50%, var(--color-bg-light) 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all .5s ease-out;
}

    .dropdown-itemc:hover {
        border-bottom: .8px solid var(--color-accent);
        color: #fff; /* was --color-primary-mid (#284b63) — 1.74:1 on --color-accent bg; #fff = 4.68:1 */
        background-position: left bottom;
    }

/* Desktop-only: animated dropdown reveal */
@media all and (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        opacity: 0;
        visibility: hidden;
        transition: .3s;
        margin-top: 0;
    }

    .navbar .dropdown-menu.fade-down {
        top: 80%;
        transform: rotateX(-75deg);
        transform-origin: 0% 0%;
    }

    .navbar .dropdown-menu.fade-up {
        top: 180%;
    }

    .navbar .nav-item:hover .dropdown-menu {
        transition: .3s;
        opacity: 1;
        visibility: visible;
        top: 100%;
        transform: rotateX(0deg);
    }
}


/* =============================================================================
   12. NAVIGATION — OFFCANVAS / MOBILE
   ============================================================================= */

.offcanvas-header {
    display: none;
}

/* Offcanvas mobile nav logo */
.offcanvas-logo {
    max-width: 100px;
}

@media (max-width: 1200px) {
    .offcanvas-header {
        display: block;
        padding-left: 0;
    }

        .offcanvas-header .btn {
            padding: 8px;
            font-size: 1.25rem;
            line-height: 1;
            background-color: var(--color-accent);
            border: 1px solid var(--color-accent);
            visibility: visible !important;
        }

    .navbar-collapse {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 100%;
        width: 100%;
        padding-right: 1rem;
        padding-left: 1rem;
        overflow-y: auto;
        visibility: hidden;
        background-color: var(--color-bg-light);
        transition: visibility .2s ease-in-out, -webkit-transform .2s ease-in-out;
    }

        .navbar-collapse.show {
            visibility: visible;
            transform: translateX(-100%);
        }

    .navbar-toggler {
        padding: 8px;
        font-size: 1.25rem;
        line-height: 1;
        background-color: var(--color-accent);
        border: 1px solid var(--color-accent);
        visibility: visible !important;
    }

        .navbar-toggler:active {
            padding: 8px;
            font-size: 1.25rem;
            line-height: 1;
            background-color: var(--color-accent);
            border: 1px solid var(--color-accent);
            visibility: visible !important;
        }
}

/* Force toggler to display even at lg breakpoint */
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-toggler {
        display: block;
    }
}


/* =============================================================================
   13. NAVIGATION — SIDE NAV
   ============================================================================= */

/* Card header labels in side nav accordions must meet 4.5:1 contrast ratio.
   Bootstrap default gray (#6c757d) on light bg fails WCAG AA — override to primary. */
#sidebar .card-header,
aside .card-header {
    color: var(--color-primary);
    font-weight: 600;
}


/* =============================================================================
   14. CARDS
   ============================================================================= */

.card {
    background-color: var(--color-bg-light);
    border: none;
}

.card:hover {
    background-color: #e6e6e6;
    
   
    
}


.card-title {
    font-weight: 600;
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--color-primary);
}

    .card-title a {
        color: var(--color-primary);
        margin-bottom: none;
    }

.card-titleb {
    color: var(--color-accent);
    font-weight: bold;
    font-size: 1.5rem;
}

.card-titlec {
    color: var(--color-bg-green) !important;
    font-weight: bold;
    font-size: 1.5rem;
}

.card-titleb:hover,
.card-titleb:active {
    color: white !important;
    cursor: pointer;
}

.card-titlec:hover,
.card-titlec:active {
    color: white !important;
    cursor: pointer;
}

.card-text {
    font-family: var(--font-body);
}

.list-group-item {
    background-color: var(--color-bg-light);
    color: var(--color-primary-dark);
    font-family: var(--font-body);
}

/* Quick link card variant */
.quicklink {
    background-color: var(--color-primary);
    color: #92C84B;
}

.quicklink:hover {
    background-color: var(--color-primary-dark);
    color: white;
}

    .quicklink .card-title {
        color: white; 
        margin-bottom: none;
    }

    .quicklink .card-body {
        padding: 30px;
    }


/* =============================================================================
   15. CAROUSEL
   ============================================================================= */

.carousel-item {
    max-height: 800px !important;
}

.carousel-indicators {
    bottom: 8%;
}

    .carousel-indicators > li {
        width: 15px;
        height: 15px;
        border-radius: 50%;
    }

/* Accessible caption — meets contrast requirements */
.carousel-caption {
    position: absolute;
    right: 30%;
    bottom: 20%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: left;
    background-color: rgba(0, 0, 0, 0.55);
    border-radius: 4px;
    padding: 1rem;
}

    .carousel-caption h2 {
        font-weight: 600;
        font-family: var(--font-heading);
        font-size: 3vw;
        color: white;
        text-shadow: 2px 2px 8px black;
    }

    .carousel-caption h5 {
        letter-spacing: .4rem;
        font-weight: 600;
        font-family: var(--font-heading);
        font-size: 2vw;
        color: var(--color-accent);
        text-shadow: 2px 2px 8px black;
    }

    .carousel-caption p {
        font-size: 85%;
    }


/* =============================================================================
   16. MODALS
   ============================================================================= */

.modal-dialog {
    margin-top: 20%;
}

.modal-content {
    border: none;
    background-color: transparent;
}

.modal-header {
    background-color: transparent;
    border-bottom: none;
    margin-bottom: 10px;
}

.modal-title {
    color: white;
    font-family: var(--font-heading);
    font-weight: Bold;
    font-size: 1.3rem;
}

.modal-body {
    background-color: transparent;
    padding: 0;
    margin-top: 0;
}

    .modal-body .inputfloat {
        position: static;
        top: 0px;
    }

.modal-backdrop.show {
    opacity: .7;
}

.close {
    text-shadow: none;
    color: white;
    opacity: 1;
}

/* Custom modal variant (modalb) */
.modalb-dialog {
    position: relative;
    width: auto;
    margin: .5rem;
    pointer-events: none;
}

.modalb-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: .3rem;
    outline: 0;
}

.modalb-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid #e9ecef;
    border-top-left-radius: .3rem;
    border-top-right-radius: .3rem;
}

.modalb-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1rem;
}

.modalb-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 1rem;
    border-top: 1px solid #e9ecef;
}

.modalb-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000;
}


/* =============================================================================
   17. TABLES
   ============================================================================= */

table {
    border-collapse: collapse;
}

    table th,
    table td {
        padding: 5px 10px;
    }

    table th {
        background: var(--color-primary);
        color: var(--color-accent-on-dark); /* was --color-accent (#4f772d) — contrast 1.81:1; now 4.74:1 */
    }

    table tr:nth-child(odd) {
        background: #edf0e8;
    }


/* =============================================================================
   18. LISTS
   ============================================================================= */

.bulletlist li {
    list-style-type: disc !important;
}

.list-styled {
    list-style-type: circle !important;
}

.footer_ul_amrc {
    margin: 0px;
    list-style-type: none;
    font-size: 14px;
    padding: 0px 0px 10px 0px;
}

    .footer_ul_amrc li {
        padding: 0px 0px 5px 0px;
    }

        .footer_ul_amrc li a {
            color: var(--color-text-muted);
        }

            .footer_ul_amrc li a:hover {
                color: var(--color-white);
                text-decoration: none;
            }

.footer_ul2_amrc {
    margin: 0px;
    list-style-type: none;
    padding: 0px;
}

    .footer_ul2_amrc li p {
        display: table;
    }

    .footer_ul2_amrc li a:hover {
        text-decoration: none;
    }

    .footer_ul2_amrc li i {
        margin-top: 5px;
    }

.foote_bottom_ul_amrc {
    list-style-type: none;
    padding: 0px;
    display: table;
    margin: 10px auto;
}

    .foote_bottom_ul_amrc li {
        display: inline;
    }

        .foote_bottom_ul_amrc li a {
            color: var(--color-text-muted); /* was #999 — contrast 3.29:1; now 4.90:1 */
            margin: 0 12px;
        }

.social_footer_ul {
    list-style-type: none;
}

    .social_footer_ul li {
        padding-left: 20px;
        padding-top: 10px;
        float: left;
    }



        .social_footer_ul li i {
            width: 20px;
            height: 20px;
            text-align: center;
        }


/* =============================================================================
   19. BADGES
   ============================================================================= */

.badge-primary {
    background-color: var(--color-primary-dark);
}


/* =============================================================================
   20. FOOTER
   ============================================================================= */

footer {
    width: 100%;
    background-color: var(--color-primary);
    padding: 10px 0px 25px 0px;
}

    footer p {
        font-size: 13px;
        color: var(--color-text-muted);
        padding-bottom: 0px;
        margin-bottom: 8px;
    }

.col_white_amrc {
    color: var(--color-white);
}

.pt2 {
    padding-top: 40px;
    margin-bottom: 20px;
}

.mb10 {
    padding-bottom: 15px;
}

.bottom_border {
    border-bottom: 1px solid #323f45;
    padding-bottom: 20px;
}

.footertitle {
    font-weight: bold;
    color: var(--color-accent-on-dark); /* was --color-accent (#4f772d) — contrast 1.81:1; now 4.74:1 */
    font-family: var(--font-heading);
}

.fleft {
    float: left;
}

.padding-right {
    padding-right: 10px;
}

/* Footer navigation links — white with underline for WCAG 2.1 AA (1.4.1 Use of Color).
   #ffffff on --color-primary (#064A60) = 10.63:1 contrast ratio. */
footer a,
.footer a {
    color: var(--color-white);
    text-decoration: underline;
    transition: color 0.2s ease, font-weight 0.2s ease;
}

/* Phone and email contact links — light green (#a8e34f) on --color-primary (#064A60) = 5.05:1 */
footer .contact-link,
.footer .contact-link {
    color: #a8e34f;
}

/* Hover / focus: white text, bold weight.
   outline:none removed — WCAG 2.4.7 requires all focus indicators to be visible.
   :focus-visible below provides the styled indicator for keyboard users. */
footer a:hover,
footer a:focus,
.footer a:hover,
.footer a:focus {
    color: var(--color-white) !important;
    font-weight: bold;
    background-color: transparent;
}

/* Keyboard-only focus indicator — visible green outline (WCAG 2.4.7 Focus Visible) */
footer a:focus,
footer a:focus-visible,
.footer a:focus,
.footer a:focus-visible {
    outline: 3px solid #a8e34f;
    outline-offset: 2px;
}

/* Social icon links */
footer .social-link,
.footer .social-link {
    color: var(--color-white);
    font-size: 1.8rem;
    transition: color 0.2s ease, transform 0.2s ease;
    text-decoration: none; /* Icons convey meaning visually; aria-label provides text alternative */
}

/* outline:none removed from :focus — WCAG 2.4.7 requires visible focus for all users */
footer .social-link:hover,
footer .social-link:focus,
.footer .social-link:hover,
.footer .social-link:focus {
    color: #a8e34f;
    transform: scale(1.25);
}

/* Keyboard-only focus indicator for social icons */
footer .social-link:focus,
footer .social-link:focus-visible,
.footer .social-link:focus,
.footer .social-link:focus-visible {
    outline: 3px solid #a8e34f;
    outline-offset: 4px;
}


/* =============================================================================
   21. UTILITY / HELPER CLASSES
   ============================================================================= */

.bg-infolight {
    background-color: var(--color-bg-info);
}

.bg-green {
    background-color: var(--color-bg-green) !important;
}

.bg-primary {
    background-color: var(--color-primary) !important;
}

.border-light {
    border-color: var(--color-border-light) !important;
}

.staff {
    border-radius: 50%;
    max-height: 200px;
}

.fa-exclamation-circle {
    color: var(--color-danger) !important;
}


/* =============================================================================
   22. ANIMATIONS
   ============================================================================= */

.blink {
    animation: blink 2s steps(5, start) infinite;
    -webkit-animation: blink 1s steps(5, start) infinite;
}

@keyframes blink {
    to {
        visibility: hidden;
    }
}

@-webkit-keyframes blink {
    to {
        visibility: hidden;
    }
}


/* =============================================================================
   23. MEDIA QUERIES
   ============================================================================= */

/* --- Small screens (≤ 650px) --- */
@media (max-width: 650px) {
    .carousel-caption h2 {
        font-size: 4vw;
    }

    .carousel-caption h5 {
        font-size: 2.5vw;
    }

    .carousel-indicators > li {
        width: 10px;
        height: 10px;
        border-radius: 50%;
    }

    .jumboheading {
        letter-spacing: .4rem;
        font-weight: 600;
        font-family: var(--font-heading);
        font-size: 6vw;
        color: var(--color-primary);
        border-bottom: 1px solid var(--color-accent);
        text-transform: uppercase;
    }
}


/* =============================================================================
   24. SCBG — PREVIOUSLY FUNDED PROJECTS COMPONENT
   All rules scoped to #scbg-funded-projects to prevent conflicts.
   ============================================================================= */

/* ---- Section heading ---- */
#scbg-funded-projects {
    margin-top: 2rem;
    font-family: var(--font-body);
}

#scbg-funded-projects .section-heading {
    letter-spacing: .4rem;
    font-weight: 600;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-accent);
    text-transform: uppercase;
    margin-bottom: 1rem;
    padding-bottom: .25rem;
}

/* ---- Stats bar ---- */
#scbg-funded-projects .stats-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

#scbg-funded-projects .stat-badge {
    background-color: var(--color-primary);
    color: var(--color-accent-on-dark);
    font-family: var(--font-heading);
    font-weight: 700;
    padding: .4rem .85rem;
    border-radius: .25rem;
    font-size: .95rem;
    white-space: nowrap;
}

#scbg-funded-projects .stat-badge span {
    color: var(--color-white);
    font-weight: 400;
    margin-left: .3rem;
    font-family: var(--font-body);
    font-size: .85rem;
}

/* ---- Filter toolbar ---- */
#scbg-funded-projects .filter-bar {
    background-color: var(--color-bg-info);
    border: 1px solid #b8e4ec;
    border-radius: .3rem;
    padding: .85rem 1rem;
    margin-bottom: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: flex-end;
}

#scbg-funded-projects .filter-group {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 140px;
}

#scbg-funded-projects .filter-group label {
    font-size: .78rem;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: .05rem;
}

#scbg-funded-projects .filter-group select,
#scbg-funded-projects .filter-group input[type="text"] {
    border: 2px solid var(--color-primary);
    border-radius: .25rem;
    padding: .3rem .5rem;
    font-family: var(--font-body);
    font-size: .9rem;
    color: var(--color-primary);
    background-color: var(--color-white);
    min-width: 140px;
}

#scbg-funded-projects .filter-group select:focus,
#scbg-funded-projects .filter-group input[type="text"]:focus {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
    border-color: #005fcc;
}

#scbg-funded-projects .filter-reset-btn {
    background-color: var(--color-primary);
    color: var(--color-accent-on-dark);
    border: none;
    border-radius: .25rem;
    padding: .38rem .85rem;
    font-family: var(--font-body);
    font-size: .9rem;
    cursor: pointer;
    align-self: flex-end;
    white-space: nowrap;
}

#scbg-funded-projects .filter-reset-btn:hover {
    background-color: var(--color-primary-dark);
    color: #e9ecef;
}

#scbg-funded-projects .filter-reset-btn:focus {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
}

#scbg-funded-projects .results-count {
    font-size: .85rem;
    color: #555;
    align-self: flex-end;
    margin-left: auto;
    white-space: nowrap;
}

/* ---- Table wrapper ---- */
#scbg-funded-projects .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #b8e4ec;
    border-radius: .3rem;
}

/* ---- Main table ---- */
#scbg-funded-projects table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

#scbg-funded-projects table th,
#scbg-funded-projects table td {
    padding: .55rem .75rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #dde;
}

#scbg-funded-projects table th {
    background-color: var(--color-primary);
    color: var(--color-accent-on-dark);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .04rem;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Sortable column header buttons */
#scbg-funded-projects table th button.sort-btn {
    background: none;
    border: none;
    color: var(--color-accent-on-dark);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .04rem;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    gap: .3rem;
    white-space: nowrap;
}

#scbg-funded-projects table th button.sort-btn:focus {
    outline: 3px solid var(--color-accent-on-dark);
    outline-offset: 2px;
    border-radius: 2px;
}

#scbg-funded-projects table th button.sort-btn .sort-icon {
    font-style: normal;
    font-size: .75rem;
    opacity: .6;
}

#scbg-funded-projects table th button.sort-btn[aria-sort="ascending"] .sort-icon,
#scbg-funded-projects table th button.sort-btn[aria-sort="descending"] .sort-icon {
    opacity: 1;
}

#scbg-funded-projects table tr:nth-child(odd) {
    background-color: #edf0e8;
}

#scbg-funded-projects table tr:nth-child(even) {
    background-color: var(--color-bg-light);
}

#scbg-funded-projects table tr:hover {
    background-color: var(--color-bg-green);
}

#scbg-funded-projects table tr:focus-within {
    outline: 3px solid #005fcc;
    outline-offset: -2px;
}

/* ---- Column widths ---- */
#scbg-funded-projects .col-year      { width: 5%;  min-width: 60px; }
#scbg-funded-projects .col-recipient { width: 14%; min-width: 130px; }
#scbg-funded-projects .col-title     { width: 20%; min-width: 180px; }
#scbg-funded-projects .col-amount    { width: 8%;  min-width: 90px; text-align: right; }
#scbg-funded-projects .col-crop      { width: 14%; min-width: 120px; }
#scbg-funded-projects .col-summary   { width: 24%; min-width: 200px; }
#scbg-funded-projects .col-links     { width: 15%; min-width: 130px; }
#scbg-funded-projects td.col-amount  { text-align: right; }

/* ---- Crop / category tags ---- */
#scbg-funded-projects .tag {
    display: inline-block;
    background-color: var(--color-bg-green);
    color: #2a3a00; /* dark green — passes 4.5:1 on --color-bg-green */
    font-size: .72rem;
    font-weight: 700;
    padding: .1rem .4rem;
    border-radius: 2rem;
    margin: .1rem .1rem .1rem 0;
    white-space: nowrap;
    line-height: 1.4;
}

/* ---- Summary expand / collapse ---- */
#scbg-funded-projects .summary-toggle {
    background: none;
    border: none;
    color: var(--color-primary-dark);
    font-size: .8rem;
    cursor: pointer;
    padding: 0;
    font-family: var(--font-body);
    font-weight: 700;
    text-decoration: underline;
    display: inline;
}

#scbg-funded-projects .summary-toggle:focus {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
    border-radius: 2px;
}

#scbg-funded-projects .summary-toggle:hover {
    color: var(--color-primary);
}

#scbg-funded-projects .summary-full          { display: none; }
#scbg-funded-projects .summary-full.expanded { display: inline; }
#scbg-funded-projects .summary-preview.hidden { display: none; }

/* ---- Links column ---- */
#scbg-funded-projects .links-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#scbg-funded-projects .links-list li {
    margin-bottom: .3rem;
}

#scbg-funded-projects .links-list a {
    color: var(--color-primary-dark);
    font-weight: 700;
    font-size: .82rem;
    word-break: break-word;
}

#scbg-funded-projects .links-list a:hover {
    color: var(--color-primary);
}

#scbg-funded-projects .links-list a:focus {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
    border-radius: 2px;
}

#scbg-funded-projects .links-list .link-label {
    font-size: .75rem;
    color: #555;
    display: block;
    font-weight: 400;
}

/* Status badges */
#scbg-funded-projects .badge-terminated {
    background-color: #f8d7da;
    color: var(--color-danger-text); /* #721c24 — passes 4.5:1 on #f8d7da */
    font-size: .72rem;
    font-weight: 700;
    padding: .15rem .4rem;
    border-radius: 3px;
    white-space: nowrap;
}

#scbg-funded-projects .badge-pending {
    background-color: #fff3cd;
    color: #856404; /* passes 4.5:1 on #fff3cd */
    font-size: .72rem;
    font-weight: 700;
    padding: .15rem .4rem;
    border-radius: 3px;
    white-space: nowrap;
}

/* ---- Screen-reader-only utility (scoped) ---- */
#scbg-funded-projects .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Responsive: tablet — horizontal scroll ---- */
@media (max-width: 900px) {
    /* Filter bar: let all groups stack and stretch full width */
    #scbg-funded-projects .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    #scbg-funded-projects .filter-group {
        width: 100%;
        min-width: 0;
    }

    #scbg-funded-projects .filter-group select,
    #scbg-funded-projects .filter-group input[type="text"] {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    #scbg-funded-projects .filter-reset-btn {
        width: 100%;
        align-self: stretch;
        text-align: center;
    }

    #scbg-funded-projects .results-count {
        margin-left: 0;
        text-align: center;
        width: 100%;
    }
}

/* ---- Responsive: mobile — stack table to label/value cards ---- */
@media (max-width: 600px) {
    #scbg-funded-projects .table-wrapper {
        border: none;
        overflow-x: visible;
    }

    /* Make every table element block so we can reflow freely */
    #scbg-funded-projects table,
    #scbg-funded-projects thead,
    #scbg-funded-projects tbody,
    #scbg-funded-projects th,
    #scbg-funded-projects td,
    #scbg-funded-projects tr {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    /* Visually hide thead — kept in DOM for screen readers */
    #scbg-funded-projects thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    /* Each row becomes a card */
    #scbg-funded-projects tbody tr {
        border: 1px solid #b8e4ec;
        border-radius: .3rem;
        margin-bottom: 1rem;
        background-color: var(--color-bg-light) !important;
        overflow: hidden;
    }

    #scbg-funded-projects tbody tr:hover {
        background-color: var(--color-bg-green) !important;
    }

    /* Each cell: full width, label stacked above value */
    #scbg-funded-projects td {
        display: flex;
        flex-direction: column;
        padding: .5rem .75rem;
        border-bottom: 1px solid #e4e8e0;
        min-height: unset;
        text-align: left;
        width: 100%;
        box-sizing: border-box;
    }

    #scbg-funded-projects td:last-child {
        border-bottom: none;
    }

    /* Label injected above cell content via ::before */
    #scbg-funded-projects td::before {
        content: attr(data-label);
        display: block;
        font-weight: 700;
        font-family: var(--font-heading);
        font-size: .7rem;
        color: var(--color-primary);
        text-transform: uppercase;
        letter-spacing: .06rem;
        margin-bottom: .2rem;
        white-space: nowrap;
    }

    /* Remove the fixed percentage widths — all full-width in card mode */
    #scbg-funded-projects .col-year,
    #scbg-funded-projects .col-recipient,
    #scbg-funded-projects .col-title,
    #scbg-funded-projects .col-amount,
    #scbg-funded-projects .col-crop,
    #scbg-funded-projects .col-summary,
    #scbg-funded-projects .col-links {
        width: 100%;
        min-width: 0;
    }

    /* Award amount: left-align in card mode */
    #scbg-funded-projects td.col-amount {
        text-align: left;
    }

    /* Tags should wrap naturally */
    #scbg-funded-projects .tag {
        white-space: normal;
    }
}


/* =============================================================================
   25. PERMITTING GUIDE PAGE — One-Stop Environmental Permitting Guide
   Scoped styles for the permitting-guide content page.
   Relies on variables defined in section 01.
   ============================================================================= */

/* ── Page layout ── */
.page-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

/* ── Section headings ── */
.section-title {
    font-family: var(--font-heading);
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .15rem;
    color: var(--color-primary);
    border-bottom: 3px solid var(--color-accent);
    padding-bottom: .4rem;
    margin: 2.5rem 0 1.25rem;
}

.section-title.first {
    margin-top: 0;
}

/* ── Permit-card sub-question headings (h3 and h4 within cards) ── */
h3.sub-title,
h4.sub-title {
    font-size: 1.1rem;
    font-weight: 700;
    font-style: italic;
    color: var(--color-primary);
    margin: 1.25rem 0 .4rem;
    font-family: var(--font-heading);
}

/* ── Body paragraph spacing ── */
.page-wrap p {
    margin-bottom: .9rem;
    font-size: .97rem;
}

/* ── Executive Summary letter block ── */
.letter-block {
    background: var(--color-white);
    border: 1px solid var(--color-accent); /* WCAG 1.4.11 — was color-bg-info (same as bg, invisible) */
    border-left: 5px solid var(--color-accent);
    border-radius: 4px;
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
}

.letter-block .letter-date {
    font-weight: 700;
    margin-bottom: .75rem;
}

.letter-block .letter-sig {
    margin-top: 1.25rem;
    font-style: italic;
}

/* ── Permit / section cards ── */
.permit-card {
    background: var(--color-white);
    border: 1px solid var(--color-accent); /* WCAG 1.4.11 — was color-bg-info (invisible) */
    border-radius: 6px;
    padding: 1.75rem 2rem;
    margin-bottom: 2rem;
}

.permit-card h3.permit-card-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .1rem;
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: .4rem;
    margin-bottom: 1.25rem;
}

/* ── Program cross-reference tables ── */
.table-wrap {
    overflow-x: auto;
    margin: 1rem 0;
    border: 1px solid var(--color-accent); /* WCAG 1.4.11 — was color-bg-info (invisible) */
    border-radius: 4px;
}

/* Cells marking program applicability */
td.check {
    text-align: center;
    font-weight: 700;
    color: var(--color-primary-dark);
}

/* ── Table footnote / note ── */
/* color: var(--color-text-muted) (#b9c0c8) on --color-bg-info fails WCAG AA
   contrast (1.9:1). Replaced with --color-primary (#064A60) = 10.1:1 on white. */
.table-note {
    font-size: .8rem;
    color: var(--color-primary);
    font-style: italic;
    margin-top: .5rem;
    padding: .5rem .75rem;
    background: var(--color-bg-info);
    border: 1px solid var(--color-accent);
    border-radius: 3px;
}

/* ── Contact information box ── */
/* Border was var(--color-bg-info) (same as bg) — invisible. Changed to
   var(--color-accent) for a visible, 3:1+ contrast boundary. */
.contact-box {
    background: var(--color-bg-info);
    border: 1px solid var(--color-accent);
    border-radius: 4px;
    padding: .85rem 1.1rem;
    font-family: var(--font-body);
    font-size: .9rem;
    margin: 1rem 0;
}

.contact-box a {
    color: var(--color-primary-dark);
    font-weight: 700;
}

/* ── Resource URL display box ── */
.url-box {
    display: inline-block;
    background: var(--color-white);
    border: 2px solid var(--color-primary);
    border-radius: 3px;
    padding: .4rem 1rem;
    font-family: 'Courier New', monospace;
    font-size: .85rem;
    color: var(--color-primary);
    font-weight: 700;
    margin: .75rem 0 1rem;
    word-break: break-all;
}

/* ── Alert / notice box ── */
.alert-box {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    padding: .85rem 1.1rem;
    font-size: .9rem;
    font-family: var(--font-body);
    margin: 1rem 0;
}

/* ── Back to top link ── */
.back-top {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-accent-on-dark);
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08rem;
    text-transform: uppercase;
    padding: .3rem .8rem;
    text-decoration: none;
    border-radius: 3px;
    margin-top: .5rem;
}

.back-top:hover {
    background: var(--color-primary-dark);
    color: var(--color-white) !important;
}

/* ── Flowchart section label ── */
.flowchart-title {
    font-family: var(--font-body);
    font-size: .85rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .1rem;
    color: var(--color-primary);
    margin: 1.5rem 0 .75rem;
    padding: .4rem .75rem;
    background: var(--color-bg-green);
    border-left: 4px solid var(--color-accent);
}

/* ── Flowchart container ── */
.flowchart {
    background: var(--color-white);
    border: 1px solid #c8d9db; /* WCAG 1.4.11 — was color-bg-info (same as bg, invisible) */
    border-radius: 6px;
    padding: 1.5rem;
    margin: 0 0 1.5rem;
    overflow-x: auto;
}

/* ── Flowchart layout primitives ── */
.flow-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 280px;
}

.flow-branch {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
}

.flow-branch-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 140px;
    max-width: 220px;
    flex: 1;
}

/* ── Flowchart nodes ── */
.flow-node {
    background: var(--color-primary);
    color: var(--color-accent-on-dark);
    font-family: var(--font-body);
    font-size: .8rem;
    font-weight: 700;
    padding: .6rem 1rem;
    border-radius: 4px;
    text-align: center;
    max-width: 320px;
    width: 100%;
    line-height: 1.35;
}

/* Applicant-side process node */
.flow-node.applicant {
    background: var(--color-bg-green);
    color: var(--color-primary);
    border: 2px solid var(--color-accent);
}

/* Terminal / outcome node */
.flow-node.terminal {
    background: var(--color-accent);
    color: var(--color-primary);
    border-radius: 20px;
    font-weight: 900;
}

/* Denied outcome node */
.flow-node.denied {
    background: #f8d7da;
    color: var(--color-danger-text);
    border: 2px solid #f5c6cb;
    border-radius: 20px;
}

/* ── Flowchart connector arrow ── */
.flow-arrow {
    width: 2px;
    height: 24px;
    background: var(--color-primary);
    position: relative;
    margin: 0 auto;
}

.flow-arrow::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid var(--color-primary);
}

/* ── Flowchart branch decision label ── */
.flow-branch-label {
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    margin-bottom: .3rem;
    letter-spacing: .04rem;
}

/* ── Flowchart colour key ── */
.flow-key {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding-top: .75rem;
    border-top: 1px dashed #9ab8bb; /* WCAG 1.4.11 — was color-bg-info (same as bg) */
    font-family: var(--font-body);
    font-size: .75rem;
}

.flow-key-item {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.flow-key-swatch {
    width: 18px;
    height: 14px;
    border-radius: 2px;
    display: inline-block;
    flex-shrink: 0;
}

/* ── Responsive — tablet / mobile ── */
@media (max-width: 680px) {
    .permit-card {
        padding: 1.25rem 1rem;
    }

    .letter-block {
        padding: 1rem;
    }

    .flow-branch {
        flex-direction: column;
        align-items: center;
    }

    .flow-branch-col {
        max-width: 100%;
        width: 100%;
    }
}

/* ── Flowchart key swatches (colour indicators) ── */
.flow-key-swatch--danr {
    background: var(--color-primary);
}

.flow-key-swatch--applicant {
    background: var(--color-bg-green);
    border: 2px solid var(--color-accent);
}


/* ── Guide page anchor navigation ── */
/* Main border was var(--color-bg-info) (same as bg = invisible).
   Changed to a 1px var(--color-accent) border for visible boundary. */
.guide-anchors {
    background: var(--color-bg-info);
    border: 1px solid var(--color-accent);
    border-left: 4px solid var(--color-accent);
    border-radius: 4px;
    padding: 1rem 1.25rem 1.25rem;
    margin-bottom: 2rem;
}

.guide-anchors__label {
    font-family: var(--font-body);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1rem;
    color: var(--color-primary);
    margin-bottom: .6rem;
}

.guide-anchors__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .5rem;
    align-items: center;
}

.guide-anchors .guide-anchors__list li a {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-accent-on-dark) !important;
    font-family: var(--font-body);
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none !important;
    padding: .25rem .65rem;
    border-radius: 3px;
    transition: background .15s ease, color .15s ease;
    white-space: nowrap;
}

.guide-anchors .guide-anchors__list li a:hover,
.guide-anchors .guide-anchors__list li a:focus {
    background: var(--color-primary-dark) !important;
    color: var(--color-white) !important;
    text-decoration: none !important;
    /* outline:none removed — never suppress focus indicators (WCAG 2.4.7) */
}

.guide-anchors .guide-anchors__list li a:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
    text-decoration: none !important;
}

/* Section group dividers (aria-hidden, visual only) */
.guide-anchors__group-label {
    font-family: var(--font-body);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08rem;
    color: var(--color-primary);
    padding: .15rem 0 0;
    width: 100%;
    border-top: 1px solid var(--color-accent);
    margin-top: .35rem;
}

@media (max-width: 680px) {
    .guide-anchors .guide-anchors__list li a {
        font-size: .78rem;
    }
}

/* ============================================================
   PERMITTING GUIDE — PAGE-SPECIFIC STYLES
   PermittingGuides.aspx
   ============================================================ */

/* ── Responsive overflow containment ──────────────────────────
   Prevents custom flowchart fixed-width flex children from
   causing horizontal page scroll on mobile.
   ──────────────────────────────────────────────────────────── */

html, body {
    overflow-x: hidden;
    max-width: 100%;
}

.col-xs-12.col-sm-9 {
    overflow-x: hidden;
    min-width: 0;
}

.flowchart {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    box-sizing: border-box;
}

.flowchart > div,
.flowchart > .flow-wrap {
    min-width: min-content;
}

@media (max-width: 767px) {
    .flowchart [style*="width:200px"],
    .flowchart [style*="width:210px"],
    .flowchart [style*="width:220px"],
    .flowchart [style*="width:240px"],
    .flowchart [style*="width:260px"],
    .flowchart [style*="width:280px"],
    .flowchart [style*="width:300px"],
    .flowchart [style*="width:320px"],
    .flowchart [style*="width:340px"],
    .flowchart [style*="width:480px"],
    .flowchart [style*="width:190px"],
    .flowchart [style*="width:185px"],
    .flowchart [style*="width:170px"],
    .flowchart [style*="width:160px"],
    .flowchart [style*="width:158px"],
    .flowchart [style*="width:150px"],
    .flowchart [style*="width:148px"],
    .flowchart [style*="width:138px"],
    .flowchart [style*="width:130px"],
    .flowchart [style*="width:180px"] {
        width: 100% !important;
        max-width: 100% !important;
        flex-shrink: 1 !important;
        box-sizing: border-box;
    }

    .flowchart [style*="flex-shrink:0"],
    .flowchart [style*="flex-shrink: 0"] {
        flex-shrink: 1 !important;
        min-width: 0;
    }

    .flowchart > div > div[style*="display:flex"][style*="align-items:flex-start"],
    .flowchart > div > div[style*="display:flex;align-items:flex-start"] {
        flex-wrap: wrap;
    }

    .flow-branch {
        flex-wrap: wrap;
    }

    .flow-branch-col {
        min-width: 120px;
        flex: 1 1 120px;
    }

    .flowchart > div > div[style*="display:flex;align-items:center;gap"] {
        flex-wrap: wrap;
        gap: .5rem !important;
    }

    .flowchart [style*="width:180px;flex-shrink:0"],
    .flowchart [style*="width:200px;flex-shrink:0"],
    .flowchart [style*="width:210px;flex-shrink:0"],
    .flowchart [style*="width:220px;flex-shrink:0"],
    .flowchart [style*="width:340px;flex-shrink:0"] {
        width: 100% !important;
        flex-shrink: 1 !important;
    }

    .flowchart [style*="padding-left:186px"],
    .flowchart [style*="padding-left:360px"],
    .flowchart [style*="padding-left:80px"] {
        padding-left: 0 !important;
    }
}

/* Suppress empty wizard mount point before JS hydration */
.wr-wizard-only:not(:has(.fc-wiz)) {
    display: none;
}

/* ── Pre-submission NOI flowchart node styles (ps2-) ────────── */

.ps2-box {
    border: 2px solid var(--color-accent);
    border-radius: 8px;
    padding: .45rem .8rem;
    font-weight: 600;
    color: var(--color-primary);
    background: var(--color-bg-green);
    text-align: center;
    line-height: 1.4;
    box-sizing: border-box;
    font-size: .8rem;
}
.ps2-box--dark {
    background: var(--color-primary);
    color: var(--color-accent-on-dark);
    border-color: var(--color-primary);
}
.ps2-box--denied {
    background: #f8d7da;
    color: var(--color-danger-text);
    border-color: #f5c6cb;
}
.ps2-col { display: flex; flex-direction: column; align-items: center; }
.ps2-av {
    width: 2px; background: var(--color-primary);
    position: relative; flex-shrink: 0;
}
.ps2-av::after {
    content: ""; position: absolute; bottom: -6px; left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-top: 7px solid var(--color-primary);
}
.ps2-av--nohead::after { display: none; }
.ps2-ah {
    height: 2px; background: var(--color-primary);
    position: relative; flex-shrink: 0;
}
.ps2-ah--r::after {
    content: ""; position: absolute; right: -6px; top: 50%;
    transform: translateY(-50%);
    border-top: 5px solid transparent; border-bottom: 5px solid transparent;
    border-left: 7px solid var(--color-primary);
}
.ps2-ah--l::after {
    content: ""; position: absolute; left: -6px; top: 50%;
    transform: translateY(-50%);
    border-top: 5px solid transparent; border-bottom: 5px solid transparent;
    border-right: 7px solid var(--color-primary);
}
.ps2-lbl {
    font-size: .72rem; font-weight: 700;
    color: var(--color-primary); white-space: nowrap;
}

/* ── Large Scale Pre-Submission flowchart node styles (ls3-) ── */

.ls3-box {
    border: 2px solid var(--color-accent);
    border-radius: 10px;
    padding: .5rem .9rem;
    font-weight: 600;
    color: var(--color-primary);
    background: var(--color-bg-green);
    text-align: center;
    line-height: 1.4;
    box-sizing: border-box;
    font-size: .8rem;
}
.ls3-box--dark {
    background: var(--color-primary);
    color: var(--color-accent-on-dark);
    border-color: var(--color-primary);
}
.ls3-col { display: flex; flex-direction: column; align-items: center; }
.ls3-av {
    width: 2px; background: var(--color-primary);
    position: relative; flex-shrink: 0;
}
.ls3-av::after {
    content: ""; position: absolute; bottom: -6px; left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-top: 7px solid var(--color-primary);
}
.ls3-lbl {
    font-size: .72rem; font-weight: 700;
    color: var(--color-primary); white-space: nowrap;
}

/* ── Mine Permit Submission flowchart node styles (sb-) ──────── */

.sb-box {
    border: 2px solid var(--color-accent);
    border-radius: 9px;
    padding: .4rem .75rem;
    font-weight: 600;
    color: var(--color-primary);
    background: var(--color-bg-green);
    text-align: center;
    line-height: 1.4;
    box-sizing: border-box;
    font-size: .78rem;
    width: 100%;
}
.sb-box--dark {
    background: var(--color-primary);
    color: var(--color-accent-on-dark);
    border-color: var(--color-primary);
}
.sb-box--white {
    background: #fff;
    color: var(--color-primary);
}
.sb-box--denied {
    background: #f8d7da;
    color: var(--color-danger-text);
    border-color: #f5c6cb;
}
.sb-av {
    width: 2px; background: var(--color-primary);
    position: relative; margin: 0 auto; flex-shrink: 0;
}
.sb-av::after {
    content: ""; position: absolute; bottom: -6px; left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-top: 7px solid var(--color-primary);
}
.sb-av--nh::after { display: none; }
.sb-ah {
    height: 2px; background: var(--color-primary);
    position: relative; flex-shrink: 0;
}
.sb-ah--r::after {
    content: ""; position: absolute; right: -6px; top: 50%;
    transform: translateY(-50%);
    border-top: 5px solid transparent; border-bottom: 5px solid transparent;
    border-left: 7px solid var(--color-primary);
}
.sb-ah--l::after {
    content: ""; position: absolute; left: -6px; top: 50%;
    transform: translateY(-50%);
    border-top: 5px solid transparent; border-bottom: 5px solid transparent;
    border-right: 7px solid var(--color-primary);
}
.sb-col { display: flex; flex-direction: column; align-items: center; }
.sb-lbl {
    font-size: .7rem; font-weight: 700;
    color: var(--color-primary); white-space: nowrap;
}
.sb-hcon { display: flex; align-items: center; gap: 0; }

/* ── Interactive wizard & collapsible widget styles (fc-) ────── */

.fc-widget { margin-bottom: 1.25rem; border: 1px solid var(--color-accent); border-radius: 6px; overflow: hidden; }
.fc-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; background: var(--color-bg-green); border: none;
    border-bottom: 3px solid var(--color-accent); padding: .6rem 1rem;
    cursor: pointer; text-align: left; font-family: var(--font-heading);
    font-size: clamp(.8rem, 1.6vw, 1rem); font-weight: 900;
    text-transform: uppercase; letter-spacing: .1rem;
    color: var(--color-primary); line-height: 1.3; gap: .75rem;
}
.fc-toggle:hover { background: #c2e880; }
.fc-toggle:focus { outline: 3px solid #005fcc; outline-offset: -3px; }
.fc-chevron {
    flex-shrink: 0; width: 24px; height: 24px;
    background: var(--color-primary); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: transform .25s ease;
}
.fc-chevron svg { width: 12px; height: 12px; stroke: var(--color-accent-on-dark); }
.fc-toggle[aria-expanded="false"] .fc-chevron { transform: rotate(-90deg); }
.fc-body { overflow: hidden; max-height: 9999px; transition: max-height .35s ease; }
.fc-body.fc-collapsed { max-height: 0 !important; }
.fc-hint {
    display: none; font-size: .7rem; color: var(--color-primary);
    font-style: italic; padding: .25rem .75rem;
    background: var(--color-bg-green); border-bottom: 1px solid var(--color-accent);
}

/* Wizard step UI (fc-wiz-) */
.fc-wiz { font-family: var(--font-body); font-size: .9rem; }
.fc-wiz-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; padding: .5rem 0;
    border-bottom: 2px solid var(--color-accent); margin-bottom: 1rem;
}
.fc-wiz-title {
    font-family: var(--font-heading); font-size: clamp(.8rem, 1.6vw, .95rem);
    font-weight: 900; text-transform: uppercase; letter-spacing: .1rem;
    color: var(--color-primary);
}
.fc-wiz-reset {
    background: none; border: 2px solid var(--color-primary); border-radius: 4px;
    padding: .2rem .55rem; font-size: .72rem; font-weight: 700;
    color: var(--color-primary); cursor: pointer; white-space: nowrap;
    font-family: var(--font-body);
}
.fc-wiz-reset:hover { background: var(--color-primary); color: var(--color-accent-on-dark); }
.fc-wiz-reset:focus { outline: 3px solid #005fcc; outline-offset: 2px; }
.fc-wiz-progress {
    height: 6px; background: #dde; border-radius: 3px;
    margin-bottom: 1.25rem; overflow: hidden;
}
.fc-wiz-bar {
    height: 6px; background: var(--color-primary); border-radius: 3px;
    transition: width .3s ease; min-width: 6px;
}
.fc-wiz-step { animation: fcFadeIn .2s ease; }
@keyframes fcFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.fc-wiz-q {
    font-weight: 700; color: var(--color-primary); margin-bottom: .9rem;
    font-size: .95rem; line-height: 1.5;
}
.fc-wiz-choices { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.fc-wiz-btn {
    display: block; width: 100%; text-align: left; padding: .65rem .9rem;
    background: var(--color-bg-green); border: 2px solid var(--color-accent);
    border-radius: 6px; font-family: var(--font-body); font-size: .875rem;
    font-weight: 600; color: var(--color-primary); cursor: pointer;
    line-height: 1.4; transition: background .15s, border-color .15s;
}
.fc-wiz-btn:hover { background: #c2e880; border-color: var(--color-primary); }
.fc-wiz-btn:focus { outline: 3px solid #005fcc; outline-offset: 2px; }
.fc-wiz-cont {
    display: block; width: 100%; padding: .65rem .9rem;
    background: var(--color-primary); border: none; border-radius: 6px;
    font-family: var(--font-body); font-size: .875rem; font-weight: 700;
    color: var(--color-accent-on-dark); cursor: pointer; text-align: center;
    margin-top: .5rem; transition: background .15s;
}
.fc-wiz-cont:hover { background: var(--color-primary-dark); }
.fc-wiz-cont:focus { outline: 3px solid #005fcc; outline-offset: 2px; }
.fc-wiz-info {
    background: var(--color-bg-info); border: 1px solid var(--color-accent);
    border-left: 4px solid var(--color-primary); border-radius: 4px;
    padding: .75rem 1rem; margin-bottom: .9rem;
    color: var(--color-primary); line-height: 1.6;
}
.fc-wiz-note {
    font-size: .78rem; font-style: italic; color: #555;
    border-top: 1px solid var(--color-accent);
    margin-top: .75rem; padding-top: .5rem;
}
.fc-wiz-end { border-radius: 6px; padding: 1.1rem 1.25rem; margin-bottom: .9rem; line-height: 1.6; }
.fc-wiz-end--approved { background: #d4edda; border: 2px solid #28a745; color: #155724; }
.fc-wiz-end--denied   { background: #f8d7da; border: 2px solid #dc3545; color: #721c24; }
.fc-wiz-end--info     { background: var(--color-bg-info); border: 2px solid var(--color-accent); color: var(--color-primary); }
.fc-wiz-end-icon { font-size: 1.4rem; margin-bottom: .4rem; display: block; font-family: sans-serif; }
.fc-wiz-end-label {
    font-weight: 900; font-family: var(--font-heading); font-size: .85rem;
    text-transform: uppercase; letter-spacing: .08rem; margin-bottom: .4rem;
}
.fc-wiz-hist {
    list-style: none; padding: 0; margin: 0 0 1rem;
    border-left: 3px solid var(--color-accent); padding-left: .75rem;
}
.fc-wiz-hist li { font-size: .78rem; color: #555; padding: .15rem 0; }
.fc-wiz-hist li strong { color: var(--color-primary); }

/* ── Floating Back to Top button ─────────────────────────────── */

#back-to-top-btn {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1040;
    display: none;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    height: 2.75rem;
    width: 2.75rem;
    background: var(--color-primary);
    color: var(--color-accent-on-dark);
    border: none;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,.35);
    cursor: pointer;
    transition: background .2s, opacity .2s, transform .2s;
    opacity: 0;
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
    padding: 0 .85rem;
}
#back-to-top-btn.visible { display: flex; opacity: 1; }
#back-to-top-btn:hover { background: var(--color-primary-dark); transform: translateY(-2px); }
#back-to-top-btn:focus { outline: 3px solid #005fcc; outline-offset: 3px; }
#back-to-top-btn svg {
    width: 1rem; height: 1rem;
    fill: none; stroke: currentColor;
    stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
    pointer-events: none; flex-shrink: 0;
}
#back-to-top-btn .btt-label { display: none; }

@media (max-width: 767px) {
    .fc-hint { display: block; }
}
@media (min-width: 768px) {
    #back-to-top-btn { width: auto; border-radius: 8px; }
    #back-to-top-btn .btt-label { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
    .fc-body, .fc-chevron, .fc-wiz-step, .fc-wiz-bar { transition: none; animation: none; }
    #back-to-top-btn { transition: none; }
}

/* ── Jump-to-section mobile dropdown ───────────────────────── */

#guide-nav-select {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    padding: .55rem .75rem;
    height: auto;
    line-height: 1.4;
    border: 2px solid var(--color-accent);
    border-radius: 6px;
    cursor: pointer;
}

#guide-nav-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(6,74,96,0.25);
    outline: none;
}

#guide-nav-select option,
#guide-nav-select optgroup {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
}

#guide-nav-select optgroup {
    font-weight: 700;
}