/*! Comments */
/*! Background gradients for use in Heros, Headers, and full-width Sections Currently: Medium devices (tablets, 768px and up) TODO: convert to SASS mixins later */
/* ============================
   Herrett Bootstrap 5.3 Theme
   ============================ */
:root {
    /* Brand greens */
    --herrett-green: #0a8b6b;
    --herrett-green-dark: #097d60;

    /* Primary theme color (used by .text-primary, etc.) */
    --bs-primary: var(--herrett-green);
    --bs-primary-rgb: 10, 139, 107;

    /* Link colors (body content) */
    --bs-link-color: var(--herrett-green);
    --bs-link-color-rgb: 10, 139, 107;
    --bs-link-hover-color: var(--herrett-green-dark);
    --bs-link-hover-color-rgb: 9, 125, 96;

    /* Subtle backgrounds for primary-ish components */
    --bs-primary-bg-subtle: #d6f4ee;
    --bs-primary-border-subtle: #b4e6da;
    --bs-primary-text-emphasis: #064638;
}

/* Header & footer stay black/white – do not inherit green */
#navbarMain,
header,
footer {
    --bs-link-color: #ffffff;
    --bs-link-color-rgb: 255, 255, 255;
    --bs-link-hover-color: #f8f9fa;
    --bs-link-hover-color-rgb: 248, 249, 250;
}

/* WCAG + theme: Herrett primary buttons */
.btn-primary {
    /* Override Bootstrap's own per-class button variables */
    --bs-btn-color: #ffffff;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-color: #ffffff;

    --bs-btn-bg: var(--herrett-green);
    --bs-btn-border-color: var(--herrett-green-dark);

    --bs-btn-hover-bg: var(--herrett-green-dark);
    --bs-btn-hover-border-color: var(--herrett-green-dark);

    --bs-btn-active-bg: var(--herrett-green-dark);
    --bs-btn-active-border-color: var(--herrett-green-dark);

    font-weight: 700; /* WCAG emphasis */
}


/* Navbar typography & underline (refined to use Bootstrap classes for font/color) */
#navbarMain .nav-link {
    letter-spacing: 1px;
    text-decoration: none;
    background-image: linear-gradient(90deg, #0A8B6B, #0A8B6B);
    background-size: 0% 3px;
    background-position-y: 100%;
    background-position-x: 50%;
    background-repeat: no-repeat;
    transition: background-size 0.25s ease-in-out;
}

#navbarMain .nav-link:hover,
#navbarMain .nav-link:focus,
#navbarMain .nav-link:active {
    background-size: 100% 3px;
}

#navbarMain .dropdown-item:active {
    background-color: #0A8B6B;
}

#csi-topnav-ribbon {
    background-color: #0A8B6B;
    font-size: 12px;
    padding: 8px 20px 7px 20px;
    /* clip-path: polygon(0 0, 100% 0, 100% 100%, 7% 100%); */
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    position: absolute;
    z-index: 9999;
    border: 1px solid #097d60;
    border-top: none;
}

#csi-topnav-ribbon a {
    font-size: 12px;
    color: white;
    text-decoration: none;
}

.csi-section-bg {
    display: flex;
    align-items: stretch;
}

.csi-bg-gradient-01 {
    background: linear-gradient(15deg, rgba(0, 0, 0, 0.7301295518207283) 0%, rgba(0, 0, 0, 0.6152836134453781) 31%, rgba(209, 73, 0, 0) 77%);
}

@media (min-width: 768px) {
    .csi-bg-gradient-01 {
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.4962359943977591) 0%, rgba(0, 0, 0, 0.5) 22%, rgba(0, 0, 0, 0.19931722689075626) 49%, rgba(250, 250, 250, 0) 100%);
    }
}

/* Page Content header. Should only ever be one per page, but using a class for it anyhow */
.csi-page-content-header {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 480px;
    text-shadow: 0 0 10px rgba(0, 0, 0, .7);
    text-wrap: pretty;
}

.csi-page-content-header h1 {
    font-size: calc(3.5*100%);
    font-weight: 800;
}

.csi-page-content-header .csi-page-content-header-text {
    font-size: calc(1.3 * 100%);
    font-weight: 500;
}

/* default small page header if none is specified further */
.csi-page-content-header-none {
    background-color: #E8EEED;
}

.csi-page-content-header-none.csi-folder-forum {
    background-color: #47A6AF;
    color: #ffffff;
}

/* Page Column Controls */
.csi-page-content-body-right img {
    max-width: 100%;
}

.csi-col-left {
    border: 1px solid #f4f4f4;
    padding: 10px 10px 15px 15px;
    background-color: #fafafa;
}

/* Page Content sections */
h1, h2, h3, h4, h5 {
    font-family: 'Fira Sans', sans-serif;
    font-weight: 700;
    font-style: normal;
}

h5.card-title {
    margin-top: 0.4rem;
    margin-bottom: 1rem;
}

.csi-section-cards,
.csi-section-fluid-grey-pale {
    background-color: #f4f4f4;
}

.csi-section-fluid-green-pale {
    background-color: #E8EEED;
}

.csi-section-fluid-rust-pale {
    background-color: #f8ede8;
}

img.csi-cards-horiz {
    object-fit: cover;
    min-width: 100%;
    max-width: 100%;
}

img.card-img-top {
    height: 300px;
    object-fit: cover;
}

a.section-nav-link.active {
    font-weight: bold;
}

li.section-nav-item.active {
    list-style: disc;
}

a.csi-card-img-link {
    overflow: hidden;
}

a.csi-card-img-link img {
    transition: all 1.2s ease;
}

a.csi-card-img-link:hover img {
    transform: scale(1.2);
}

/* Footer */
footer a {
    color: white;
    text-decoration:none;
}
footer .csi-footer-contact a {
    text-decoration: underline;
}
footer .csi-footer-nav a:hover,
footer .csi-footer-legal a:hover {
    text-decoration: underline;
}

/* Mobile: flatten the "More" dropdown into inline nav items */
@media (max-width: 767.98px) {
    /* match navbar-expand-md collapse point */
    #navbarMain #herrettMoreToggle {
        display: none;
    }

    /* Turn its dropdown into a normal part of the nav list */
    .navbar-nav .dropdown-menu[aria-labelledby="herrettMoreToggle"] {
        position: static; /* no absolute-position dropdown */
        display: block;   /* always visible when the nav is open */
        float: none;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    /* Make dropdown items look like nav links */
    .navbar-nav .dropdown-menu[aria-labelledby="herrettMoreToggle"] .dropdown-item {
        padding: 0.5rem 1rem; /* match nav-link spacing */
        color: var(--bs-link-color, #fff);
        white-space: normal;
    }

    .navbar-nav .dropdown-menu[aria-labelledby="herrettMoreToggle"] .dropdown-item:hover,
    .navbar-nav .dropdown-menu[aria-labelledby="herrettMoreToggle"] .dropdown-item:focus {
        background: var(--bs-link-hover-bg, rgba(255,255,255,0.1));
        color: var(--bs-link-hover-color, #fff);
    }

    /* indent the toplevel nav items to match */
    #navbarMain a.nav-link {
        padding-left: 1rem;
    }
}