:root {
    --primary-blue: #005DA7;
    --secondary-blue:#025599;
    --primary-green: #55B849;
    --secondary-green:#55A849;
    --text-grey:#58595B;
    --light-grey:#cacaca;
}

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

.bg-light-grey {
    background-color: var(--light-grey);
}

* { 
    font-family: open-sans, sans-serif, Arial;
}

body {
    background-color: rgb(235, 235, 235);
    color: var(--text-grey);
}

p {
    font-size: 15px;
}

li {
    font-size: 15px;
}

/* --- Heading scale ---
   Body copy here is 15px, so Bootstrap's stock 40px h1 and 20px lead sit well
   above everything around them and read as belonging to a different site.
   These bring both back onto this site's scale. The .h1 - .h6 utility classes
   still win where they are used, so the green section banners and the promoted
   stormwater headings keep the exact size they had. */
h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.5rem;
}

.lead {
    font-size: 16px;
    font-weight: 400;
}

header {
    padding-top:3vh;
    padding-bottom:3vh;

    color: var(--text-grey);
    font-size: 10pt;
    line-height: 1;
}

hr {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color:grey;
    border-style: solid none;
    border-width: 1px 0;
    margin-top: 9px;
    margin-bottom: 18px;
    width: 100%;
  }

@media (max-width: 768px) {
    .custom-padding-top {
        padding-top: 3vh;
    }
}

/*Navbar*/
.nav-custom {
    background-color: var(--primary-blue);
    color:white;
    border-bottom: var(--primary-green) solid 3px;
    font-weight: bold;
    min-height: 72px;
}

.nav-custom a {
    color:white;
    text-decoration:none;
}

.nav-custom a:active {
    background-color: inherit;
}

.nav-link:hover {
    color: rgb(209, 212, 209);
}

.dropdown-item:hover {
    background-color: var(--secondary-green);
    color:white;
}

.carousel-caption p {
    font-size: 15pt;
}

.rounded {
    border: 5px solid #555;
}

.rounded:hover {
    border: 5px solid var(--primary-green);
    cursor: pointer;
}

footer {
    line-height: 60px;
}

/* The download links sit on the light-grey panel (#cacaca), where the body
   grey only reaches 4.28:1 - just under the 4.5:1 minimum. This slightly
   darker grey reaches 4.92:1 there and 6.77:1 on the page background. */
.downloadlink {
    font-weight: bold;
    color: #4F5052;
    text-decoration: none;
}

.downloadlink:hover {
    color: #4F5052;
}

/* --- Accessibility: colour contrast (WCAG AA needs 4.5:1) --- */

/* Bootstrap's default link blue (#007bff) only reaches 3.78:1 on the light
   card background. The brand blue reaches 6.38:1 and matches the rest of
   the site. Navbar and download links keep their own colours below. */
a {
    color: var(--primary-blue);
}

a:hover,
a:focus {
    color: var(--secondary-blue);
}

/* Muted grey (#6c757d) on the green footer bar is only 1.86:1 — effectively
   unreadable. Dark green on the unchanged brand-green background gives
   5.73:1 and leaves the bar's colour alone. The !important is needed to beat
   Bootstrap's own .text-muted utility, which is itself !important. */
footer.text-muted,
footer.text-muted .container {
    color: #123010 !important;
}

/* A link sitting inside a paragraph must be tellable from the text around it
   by something other than colour, so that readers who cannot distinguish the
   two hues still see it. Navigation, buttons and the download links carry
   their own styling and are left alone. */
main p a:not(.btn):not(.downloadlink),
main li a:not(.btn):not(.downloadlink) {
    text-decoration: underline;
}

/* Bootstrap's table caption grey lands at 4.45:1 on the light table
   background - a hair under the 4.5:1 minimum. */
caption {
    color: #5f686f;
}

/* The light-grey panel (#cacaca) is a darker backdrop than the rest of the
   page, so the body grey (4.28:1) and the brand blue (4.10:1) both fall short
   on it. These deepened versions clear 4.5:1 there while staying visibly the
   same colours. */
.bg-light-grey,
.bg-light-grey p,
.bg-light-grey li {
    color: #4F5052;
}

.bg-light-grey a:not(.btn):not(.downloadlink) {
    color: #00518f;
}

/* --- Layout stability --- */

/* Every <img> now carries its intrinsic width/height so the browser can
   reserve the right space before the file arrives (this is what removes the
   layout shift). Those attributes would distort any image whose width is set
   in CSS, so height stays automatic. */
.carousel-item img,
.card-img,
img.w-100,
img.rounded,
img.img {
    height: auto;
}