/****
This is custom-style.less => custom-style.css, needed for registering custom CSS into WordPress.
It is also needed to suppress 404s generated by browsers. DO NOT DELETE OR MODIFY THESE FILES.
Modified by Doug Higby on Feb 12, 2024 to copy css from "Additional CSS" area of theme to all sites.
****/

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css");

.pdfdroplet_steps {
    background-color: transparent;
}

.pdfdroplet_steps td {
    vertical-align: middle !important;
}

.up::before,
.up::after {
    content: "»";
    display: inline-block;
    margin: 0 6px;
    padding-bottom: 4px;
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.btn-donate {
    font-size: 17px;
    font-weight: bold;
    background-color: #0168A7;
    color: white;
    border-style: solid;
    border-width: 2px;
    border-radius: 4px;
    border-color: #0168A7;
    padding: 3px 15px;
    text-align: center;
    cursor: pointer;
}

.btn-donate:hover {
    background-color: white;
    color: #0168A7;
    border-color: #0168A7;
}

.wp-caption-text {
    text-align: center;
}

.grecaptcha-badge {
    visibility: hidden;
}

/*
.products .custom-logo {
	max-width: 80px !important;
}*/

.news-buttons {
    overflow-wrap: normal !important;
    word-break: keep-all !important;
}

a.no-bold {
    font-weight: normal !important;
}

.top.border,
div.top,
.top {
    display: none;
}

p.desc a,
a.read-more {
    display: none;
}

.navbar-default {
    background: #011C2F;
    border-radius: 0px;
}

.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-nav>li>a:focus {
    color: #C2C8C2;
}

.navbar-default .navbar-nav>li>a:hover {
    color: white;
    /* text-decoration: underline;*/
}

.navbar-default a.logo {
    margin-top: 6px;
}

.nav {
    margin-bottom: 6px;
}

#page-site-banner-overlay {
    height: 250px;
    background-color: #1d2327aa;
    margin-top: 15px;
    margin-bottom: 15px;
    border-radius: 7px;
    box-shadow: 0px 0px 12px rgb(0 0 0 / 20%);
    display: flex;
    flex-direction: column;
    /* Stack elements vertically */
    justify-content: space-between;
    /* Spaces items vertically */
    align-items: center;
    /* Centers items vertically */
    width: 75%;
}

h1.article-h1:not(.no-border) {
    border-bottom: 3px solid #00a7e0;
    padding-bottom: 20px;
}

h2.site-description {
    color: white;
    text-align: center;
    font-weight: 700;
    font-size: 1.7em;
    line-height: 1.3;
    margin: 0px;
}

.root-homepage#page-site-banner-overlay {
    justify-content: center;
    width: 80%;
}

.root-homepage .site-description {
    font-size: 2.3em;
}

#page-site-banner-overlay p.site-description {
    text-align: center;
    font-weight: 700;
}

#page-site-banner-overlay p.site-description span.root-homepage,
#page-site-banner-overlay p.site-description span.sub-homepage {
    font-size: 1.2em;
}

@media (min-width: 769px) {
    #chipp-chat-widget #chipp-chat-widget-full {
        right: 121px;
        /* Button width + gap + original margin */
        bottom: 25px;
        /* Optional: aligns bottom with the button */
    }
}

.flex .text-random-150 {
    color: rgb(0 0 0) !important;
    font-weight: bold;
}

@media (max-width: 759px) {
    #page-site-banner-overlay {
        width: 90%;
    }

    #page-site-banner-overlay p.site-description span.root-homepage,
    #page-site-banner-overlay p.site-description span.sub-homepage {
        font-size: 0.9em;
    }
}

#page-title,
#page-site-name {
    background: #004789;
}

h1.page-header,
h2.page-header,
#page-site-lang-tech h2,
#page-breadcrumbs h2 {
    margin-left: 0px;
}

h1.page-header a {
    color: white;
    font-weight: normal;
}

h2.page-header>div.textwidget>p {
    margin: 0px;
}

.home-box-contents {
    background: #FFF;
}

.sub-site-home-box-contents {
    margin-left: 0px;
    margin-right: 0px;
    line-height: 28px;
}

h1.sub-site-title {
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0.75em;
}

.blue-box-text {
    background: #004789;
    color: #FFF;
    padding: 15px;
    font-size: 12px;
    border-radius: 7px;
    font-style: initial;
}

.blue-box-text h2 {
    color: #FFF;
    margin: 0 0 10px 0;
    font-style: initial;
}

#home-sidebar {
    background-color: #004789;
}

#home-sidebar h3 {
    color: white;
}

@media (max-width: 991px) {
    #home-sidebar {
        margin-left: 0px;
    }
}

#page-site-lang-tech,
#page-breadcrumbs {
    background: #00A7E0;
}

a {
    color: #0056b3;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: color 0.1s, text-decoration-color 0.1s;
    outline: none;
}

a:visited {
    color: #0056b3;
    /* rgba(255,255,255,0) = white once browser strips the alpha (privacy restriction) → invisible on white backgrounds */
    text-decoration-color: rgba(255, 255, 255, 0);
}

a:hover {
    color: #00ADEF;
    text-decoration-color: #00ADEF;
}

/* Holds hover appearance while the browser applies :visited styles on click.
   !important needed because the browser's :visited rendering pass uses a
   separate paint pass that ignores normal cascade ordering. */
a.clicked-link,
a.clicked-link:visited {
    color: #00ADEF !important;
    text-decoration-color: #00ADEF !important;
}

a:focus {
    color: #0056b3;
    text-decoration-color: transparent;
    outline: none;
}

a:focus-visible {
    outline: 2px solid #0056b3;
    outline-offset: 2px;
}

/* Site name — never underline */
#page-site-name a,
#page-site-name a:hover {
    text-decoration-color: transparent;
}

span.browseNewsPosts,
span.browseTitle {
    color: #004789 !important;
}

a.customize-unpreviewable {
    color: #004789;
}

h1,
h2,
h3,
h4,
.textwidget h3 {
    color: #004789;
}

#home_primary h2,
#home_secondary h2 {
    font-weight: bold;
    font-style: normal;
}

body {
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

div.trifold {
    text-align: center;
    line-height: 27px;
    margin-bottom: 1.5em;
}

div.trifold img {
    border-radius: 7px;
}

img.rl-image-widget-image,
div.trifold img {
    border-radius: 7px;
    width: 300px;
    height: 300px;
    box-shadow: 0px 0px 12px rgb(0 0 0 / 30%);
}


@media (max-width: 991px) {
    img.rl-image-widget-image {
        width: 200px;
        height: 200px;
    }
}

@media (max-width: 759px) {
    img.rl-image-widget-image {
        width: 300px;
        height: 300px;
    }
}

#testimonial {
    background: url(../images/testimonial-bg.jpg);
    color: #ffffff;
    font-family: 'Oswald', sans-serif;
    padding: 15px 0;
}

#testimonial p,
#testimonial .textwidget {
    font-size: 20px;
    font-style: initial;
    font-family: 'Oswald', sans-serif;
}

#home_secondary {
    background-color: white;
}

#home_secondary h2 {
    text-align: center;
    color: #004789;
}

.rssItem h3 .blogname {
    color: #004789;
}

/*
.footer-top-bg {
    background: url(../images/footer-top-bg.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}*/

.footer-top-bg #license {
    background: transparent;
    padding: 15px 0;
}

.footer-top-bg #donate {
    background: transparent;
    color: #ffffff;
    padding: 15px 0;
}

/* Blue */
.footer-top-bg {
    background: linear-gradient(135deg, #0a5a8f 0%, #0066b3 100%);
    position: relative;
    overflow: hidden;
}

.footer-top-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

#license {
    background: #1161AB;
}

#donate {
    background: #095690;
}

#license a,
#license a:hover,
#donate a,
#donate a:hover,
#testimonial a,
#testimonial h2 {
    color: white;
}

#testimonial h2 {
    color: white;
    font-weight: bold;
    margin-top: 0px;
}

.footer-top,
.footer-bottom {
    background: #011C2F;
    color: #617785;
}

.footer-top a,
.footer-bottom a {
    color: #617785;
    text-decoration: none;
}

.footer-top a:hover,
.footer-bottom a:hover,
.footer-bottom li.leaf.active a:hover {
    color: white;
    text-decoration: none;
}

.footer-bottom {
    border-top-style: solid;
    border-top-color: #617785;
    border-top-width: 1px;
}

.footer-bottom li.leaf.active a {
    color: #617785;
}

.nav-horizontal>li {
    border-right-color: #617785;
}

.form-control {
    background-color: #011C2F;
    color: #C2C8C2;
}

button.btn-default {
    background-color: #011C2F;
    color: #C2C8C2;
}

button.btn-default:hover,
button.btn-default:active,
button.btn-default:focus {
    background-color: #011C2F;
    color: white;
    border-color: #C2C8C2;
}

a.btn-download,
a.btn-download-v2,
a.btn-contact {
    color: white;
    background-color: #004789;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.5);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 250ms;
}

a.btn-download:hover,
a.btn-download:active,
a.btn-download:focus,
a.btn-download-v2:hover,
a.btn-download-v2:active,
a.btn-download-v2:focus,
a.btn-contact:hover,
a.btn-contact:active,
a.btn-contact:focus {
    background-color: #0F6CBD;
    color: white;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
    will-change: transform;
    transition: transform 250ms;
    transform: translateY(-2px);
}

a.btn-download:active,
a.btn-download-v2:active,
a-btn-contact:active {
    transform: translateY(0px);
    transition: transform 34ms;
}

#fonts-button.btn-download {
    background-color: #00A7E0;
}

#page-site-banner-overlay>p>a.btn-download,
section.download-section>a.btn-download {
    display: inline-block;
    width: 200px;
    padding-left: 0;
    padding-right: 0;
    margin: 0 auto;
}

section.download-section>a.btn-download {
    margin-top: 2em;
    margin-bottom: 2em;
}

a.btn-download {
    display: inline-block;
    width: 200px;
    padding-left: 0;
    padding-right: 0;
    margin: 0% 15%;
}

section.download-section {
    border: 4px solid #004789;
    padding: 20px;
    text-align: center;
    border-radius: 5px;
    background: #eeeeee;
    margin: 1em;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.5);
}

section.download-section>h2 {
    font-weight: 700;
    margin-top: 0px;
    margin-bottom: 1em;
}

@media screen and (max-width: 759px) {
    a.btn-download {
        width: 200px;
        margin: 0% 10%;
    }
}

div.download-name {
    font-weight: 700;
    margin-top: 2em;
    margin-bottom: 0.5em;
}

.filemeta {
    font-weight: normal;
}

i.fa-download-style {
    margin-left: 0.75em;
}

p.postmeta>strong {
    font-weight: normal;
}

p.posttitle {
    font-weight: 700;
    font-size: 120%;
    margin-top: 1em;
}

span.postmetadate {
    color: #999999;
    text-transform: uppercase;
}

span.postmetadate::after {
    content: " — ";
}

.rssItem h3 .date {
    font-weight: normal;
}

.rssItem h3 .blogname {
    font-weight: bold;
}

div.rssItem {
    margin-bottom: 2.5em;
}

/* Pin all logos in news feed items to a consistent 56px square on all pages.
   !important is needed to beat:
     - .article-body / .textwidget rules in style.css setting width/height: auto
     - their max-width: 80% / 70% rules, which otherwise clamp the rendered width
       below 56px (max-width applies independently of width)
     - their negative right margins (-1em on news, -0.5em on home), which were
       designed around a smaller variable logo width and now overlap text at 56px
   External feed logos also carry inline styles as a belt-and-suspenders guarantee
   (see functions.php). */
div.rssItem .custom-logo-link {
    margin: 0 !important;        /* clear the -5px top / -0.5em right on textwidget context */
}
div.rssItem .custom-logo-link > img,
div.rssItem img.custom-logo {
    width: 56px !important;
    height: 56px !important;
    max-width: none !important;
    max-height: none !important;
    margin-right: 12px !important; /* positive gap so text doesn't overlap the 56px logo */
    object-fit: contain;
    object-position: left center;
}
/* Normalize rssItem heading size across contexts.
   .textwidget h3 in style.css sets 17px, overriding the global 19px — equalise here. */
.rssItem h3 {
    font-size: 19px;
}

img.sps-sidebar-logo {
    display: block;
    margin: 0 auto;
}

#search-box {
    display: flex;
    /* Enable flexbox */
    justify-content: flex-end;
    /* Align divs to the right */
    align-items: center;
}

div.donate-button {
    margin-top: 6.5px;
    margin-bottom: 6.5px;
    margin-right: 25px;
}

a.btn-secondary {
    width: 100px;
    background: #00A7E0;
    padding-left: 0px;
    padding-right: 0px;
    text-align: center;
    line-height: 1.4;
}

@media screen and (max-width: 759px) {
    div.donate-button {
        margin-top: 0px;
        margin-bottom: 0px;
        padding: 10px;
    }

    form.navbar-form {
        border: 0;
        border-style: none;
        border-color: transparent;
        border-image: none;
        border-image-width: 0;
        margin-top: 0px;
        margin-bottom: 0px;
    }
}

p.site-description {
    font-size: 25px;
    color: white;
    line-height: 1.3;
}

p.button-para {
    padding-top: 7px !important;
}

div.page-site-banner-row {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 25%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0) 100%);
}

.trifold-container {
    width: 100vw;
}

.trio-widget {
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding-top: 30px;
    padding-bottom: 30px;
}

Adjust trio widgets to be on top of each other and allow for wider images .trio-widget>div {
    display: flex;
    /* Use flexbox to layout the image and text side by side */
    align-items: center;
    /* Align items to the top */
    justify-content: center;
    /* Create some space between the image and the text */
    flex: 1;
    /* Allows both divs to grow and shrink as necessary */
    /*    width: 50%; */
    /* Ensures they do not exceed half the container's width */
    padding: 15px;
}

.trio-widget>div:first-child {
    display: flex;
    justify-content: right;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
    width: 50%;
    /* Set the image div to be 50% of the parent div's width */
    max-width: 585px;
    height: 100%;
    /* Match the height of the sibling div */
    padding-right: 20px;
}

.trio-widget>div>.rl-image-widget-image {
    object-fit: contain;
    /* Optional: This can make the image cover the space without distorting */
    /*flex-basis: auto;*/
    /* Default value to allocate the width based on content */
    width: auto;
    max-width: 85%;
    /*    height: 325px; */
    /* Maintain aspect ratio */
}

/* Style for the second div where the h2 and textwidget are located */
.trio-widget>div:nth-child(2) {
    display: flex;
    flex-direction: column;
    /* Stack items vertically */
    justify-content: center;
    /* Center items vertically */
    align-items: flex-start;
    /* Center items horizontally */
    text-align: center;
    /* Center align the text for all children, including h2 and textwidget */
    gap: 5%;
    padding-right: 2%;
    padding-left: 2%;
    width: 50%;
    max-width: 585px;
}

.trio-1,
.trio-3 {
    background: #eeeeee66;
}

.trio-2>div:nth-child(2) {
    order: 1;
    align-items: flex-end;
}

.trio-2>div:first-child {
    order: 2;
    justify-content: left;
    padding-left: 20px;
}

/* Style for the h2 element */
.trio-widget h2,
.trio-widget .textwidget {
    width: 80%;
}

/* Media for tablet-sized screens */
@media (max-width: 991px) {
    h2.site-description {
        font-size: 1.3em;
    }

    .trio-widget {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .trio-widget h2,
    .trio-widget .textwidget {
        width: 90%;
    }

    .trio-widget>div>.rl-image-widget-image {
        max-width: 90%;
    }
}

/*  Media Query for phone screens */
@media (max-width: 759px) {
    h2.site-description {
        font-size: 1.2em;
    }

    .trio-widget {
        flex-direction: column;
        /* Stack the items vertically */
        align-items: center;
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .trio-widget h2,
    .trio-widget .textwidget {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    .trio-widget>div {
        max-width: 100%;
        /* Full width for each item */
        padding: 1%;
        /* Adjust padding */
        justify-content: center !important;
        /* !important so it applies regardless of first-child, nth-child, etc */
    }

    /* first-child is the image */
    .trio-widget>div:first-child {
        order: 1;
        /* Image div on top */
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
    }

    .trio-widget>div:nth-child(2) {
        order: 2;
        /* Text div below the image */
        padding-top: 0;
        /* Reset padding-top */
        padding-left: 15px;
        padding-right: 15px;
        width: 100%;
    }

    .trio-widget>div>.rl-image-widget-image {
        /*height: auto;*/
    }
}

/* Add SIL styling to form buttons */
input.wpcf7-submit {
    color: white;
    font-weight: bold;
    background-color: #004789;
    border-color: #004789;
    border-width: 5px;
    border-style: solid;
    border-radius: 4px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    transition: transform 250ms;
}

input.wpcf7-submit:hover {
    background-color: #0F6CBD;
    border-color: #0F6CBD;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.6);
    will-change: transform;
    transition: transform 250ms;
    transform: translateY(-2px);
}

input[type="reset" i] {
    border-style: solid;
    border-color: #F0F0F0;
    border-width: 5px;
    border-radius: 4px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
    transition: transform 250ms;
}

input[type="reset" i]:hover {
    background-color: #E5E5E5;
    border-color: #E5E5E5;
}

.announcement {
    background-color: #F7FCFB;
    border: 2px #004789 solid;
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 0.75em 0.75em 0;
    border-radius: 5px;
    color: #004789;
    box-shadow: 0px 0px 12px rgb(0 0 0 / 10%);
}

h1.article-h1 {
    margin-top: 1em;
    margin-bottom: 1em;
}

.broken_link,
a.broken_link {
    text-decoration: initial !important;
}

.sil-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 25px;
    margin-bottom: 25px;
}

/* Shared button styles */
.sil-button {
    padding: 10px 25px;
    font-size: 17px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 250ms, box-shadow 250ms;
    line-height: 17px;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.5);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    will-change: transform, box-shadow;
}

/* Primary button styles */
.sil-button-primary,
.sil-button-primary:focus {
    background-color: #004789;
    color: white;
}

.sil-button-primary:focus,
.sil-button-secondary:focus {
    text-decoration: none;
}

/* a:visited specificity (0,1,1) beats .sil-button-primary (0,1,0); add element selector to win */
a.sil-button-primary,
a.sil-button-primary:visited {
    color: white;
}

.sil-button-primary:hover {
    background-color: #0F6CBD;
    color: white;
}

/* Secondary button styles */
.sil-button-secondary,
.sil-button-secondary:focus {
    background-color: white;
    border: 2px solid #004789;
    color: #004789;
    padding: 8px 25px;
}

a.sil-button-secondary,
a.sil-button-secondary:visited {
    color: #004789;
}

.sil-button-secondary:hover {
    background-color: #eee;
    color: #004789;
    border-color: #004789;
}

/* Shared hover effects for all buttons */
.sil-button:hover {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
    transform: translateY(-2px);
    will-change: transform, box-shadow;
    text-decoration: none;
}

.flex-row-2-col {
    display: flex;
    justify-content: space-between;
    /* Space between the columns */
    align-items: stretch;
    /* Stretch columns to always be the same height */
    margin-bottom: 1em;
}

.home-box-contents,
#home-sidebar {
    font-size: 15px;
    border-style: solid;
    border-width: 5px;
    border-color: #004789;
    border-radius: 7px;
}

.home-box-contents h3,
#home-sidebar h3 {
    font-size: 1.8em;
    font-weight: 700;
    text-align: center;
    margin: 0px;
    margin-top: 15px;
    line-height: 1.4;
}

.dual-column {
    margin: 0px;
    padding: 10px 20px;
    width: 45%;
    box-shadow: 0px 0px 12px rgb(0 0 0 / 20%);
}

.home-box-contents {
    margin-right: 1.5em;
}

#home-sidebar {
    margin-left: 1.5em;
}

/* Tablet view adjustments */
@media (max-width: 991px) {
    .root-homepage .site-description {
        font-size: 2em;
    }

    .flex-row-2-col {
        flex-direction: column;
        /* Stack columns vertically */
        height: auto;
        /* Adjust height for content */
        justify-content: center;
        align-items: center;
    }

    .dual-column {
        width: 95%;
        /* Full width for each item */
        margin-bottom: 20px;
        /* Add space at the bottom of each column */
    }

    .home-box-contents {
        margin-right: 0;
    }

    #home-sidebar {
        margin-left: 0;
        /* Remove left margin to avoid extra space */
    }
}

/* Mobile view adjustments */
@media (max-width: 759px) {
    .root-homepage .site-description {
        font-size: 1.4em;
    }

    .flex-row-2-col {
        padding: 0 10px;
        /* Adjust padding for smaller screens */
        margin-bottom: 0px;
    }

    .dual-column {
        padding: 15px;
        /* Adjust padding for smaller screens */
        margin-bottom: 15px;
        /* Adjust margin for smaller screens */
    }

    .home-box-contents,
    #home-sidebar {
        font-size: 14px;
        /* Adjust font size for smaller screens */
    }
}

#sidebar_main .download-section {
    background: white;
}

blockquote {
    border-color: #00A7E0;
    background-color: #f1f8ff;
    font-style: italic;
    padding: 20px;
    margin-bottom: 30px
}

blockquote.attribution {
    font-style: normal;
    font-size: 1em;
    margin-left: 1em;
    font-family: monospace;
}

blockquote.info {
    font-size: inherit;
    font-style: normal;
}

blockquote li {
    margin-bottom: 8px;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#home_secondary .blog-posts ul {
    list-style-type: none;
    padding-left: 0;
}

.nav {
    margin-bottom: 0px;
}

.navbar-default li.nav-main-item {
    border-right: none;
    padding-top: 6px;
    padding-bottom: 6px;
}

a.nav-main-link {
    text-decoration: none;
}

.navbar-default .navbar-nav>li:hover a.nav-main-link {
    color: white;
}

.navbar-default li.nav-main-item:hover {
    background-color: #0f6cbd;
}

/* Basic styles for the sub-menu */
.sub-menu {
    display: none;
    /* Initially hide the sub-menu */
    position: absolute;
    /* Position it absolutely */
    top: 33px;
    list-style: none;
    /* Remove default list styling */
    padding: 4px 0px;
    /* Remove default padding */
    margin: 0;
    /* Remove default margin */
    border: 2px solid transparent;
    /* 2px white border */
    background-color: white;
    z-index: 999;
    /* Higher z-index to float on top */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.8);
}

/* Make the sub-menu visible when hovering over a parent item */
.nav-main-item:hover>.sub-menu {
    display: block;
    /* Show the sub-menu on hover */
}

/* Styles for sub-menu items */
.nav-sub-item {
    margin: 0;
    /* Remove margin */
    padding: 3px 0px;
    /* Add padding */
    display: block;
}

/* Link styles for sub-menu items */
.nav-sub-link {
    color: #004789;
    text-decoration: none;
    /* Remove underline */
    display: block;
    /* Make links block-level elements */
    padding: 2px 5px;
    /* Add padding */
    white-space: nowrap;
    /* Prevent text from wrapping */
}

/* Hover effect for sub-menu links */
.nav-sub-link:hover {
    text-decoration: underline;
    color: #0f6cbd;
}

li.nav-sub-item {
    border-right: none;
}

.nav-main-item.menu-item-has-children a.nav-main-link::after {
    content: "\25BE";
    margin-left: 3px;
}

/* Available to changes the down arrow (in the ::after section) on hover: Not currently working??
.nav-main-item.menu-item-has-children:hover a.nav-main-link::after {
    transform: rotate(180deg);
}
*/

/* Media query to temporarily hide sub-menu and ::after content on mobile devices */
@media (max-width: 1px) {
    .navbar-default li.nav-main-item {
        display: block;
    }

    .nav-main-item {
        position: relative;
        /* Make parent menu item relative */
    }

    .sub-menu {
        position: absolute;
        /* Position it absolutely */
        top: 100%;
        /* Position below the parent menu item */
        left: 0;
        width: 100%;
        /* Take full width */
        background-color: white;
        z-index: 9999;
        /* Ensure it overlays other elements */
        box-shadow: none;
        /* Remove shadow */
        border: none;
        /* Remove border */
    }

    .sub-menu,
    .nav-main-item:hover>.sub-menu {
        /*        display: none; */
        /* Hide sub-menu on mobile */
    }

    .nav-main-item.menu-item-has-children a.nav-main-link::after {
        /*        content: none; */
        /* Remove ::after content (triangle) on mobile */
    }

    .sub-menu {
        box-shadow: none;
        /* Remove shadow */
        padding-left: 20px;
        /* Indent sub-menu items */
    }

    .nav-main-item.menu-item-has-children .sub-menu {
        display: none;
        /* Hide sub-menus by default */
    }

    .nav-main-item.menu-item-has-children.active .sub-menu {
        display: block;
        /* Show sub-menus when active class is added */
    }

    .navbar-default .navbar-nav>.active>a,
    .navbar-default .navbar-nav>li>a:focus,
    .navbar-default .navbar-nav>.active>a:hover,
    .navbar-default .navbar-nav>.active>a:focus {
        color: white;
        background-color: #0f6cbd;
    }

    .navbar-default li.nav-main-item:hover {
        background-color: transparent;
    }
}

/* Media query to temporarily hide sub-menu and ::after content on mobile devices */
@media (max-width: 759px) {
    .navbar-default li.nav-main-item {
        display: block;
    }

    .sub-menu,
    .nav-main-item:hover>.sub-menu {
        display: none;
        /* Hide sub-menu on mobile */
    }

    .nav-main-item.menu-item-has-children a.nav-main-link::after {
        content: none;
        /* Remove ::after content (triangle) on mobile */
    }

    /* Styles the mobile menu button */
    .main-menu-toggle-test {
        display: inline-block;
        /* Show menu toggle button */
        cursor: pointer;
        /* Pointer cursor */
        font-size: 22px;
        /* Larger font size */
        padding: 3px 8px;
        /* Add padding */
        color: white;
        background-color: #004789;
        border-radius: 4px;
    }
}

/* Media query for mobile devices 
   Also update ../js/site.js to show sub-menu on click
*/
@media (max-width: 1px) {
    .nav-main-item {
        position: relative;
        /* Make parent menu item relative */
    }

    .full-screen-menu {
        display: none;
        /* Initially hide the full-screen menu */
        position: fixed;
        /* Fix to the viewport */
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        /* Full height */
        background-color: rgba(255, 255, 255, 0.95);
        /* Slightly transparent background */
        z-index: 10000;
        /* High z-index to ensure it overlays everything */
        overflow-y: auto;
        /* Enable scrolling if needed */
        padding: 20px;
        /* Add some padding */
        box-sizing: border-box;
        /* Include padding in width and height calculations */
        transition: all 0.3s ease-in-out;
        /* Smooth transition */
    }

    .full-screen-menu.active {
        display: block;
        /* Show the full-screen menu */
    }

    .nav-main-item.menu-item-has-children .sub-menu {
        display: none;
        /* Always display sub-menus inside full-screen menu */
        position: static;
        /* Default position */
        box-shadow: none;
        /* Remove shadow */
        border: none;
        /* Remove border */
        padding-left: 20px;
        /* Indent sub-menu items */
    }

    .nav-main-item.menu-item-has-children.active .sub-menu {
        display: block;
        /* Show sub-menus when active class is added */
    }

    .main-menu-toggle {
        display: inline-block;
        /* Show menu toggle button */
        cursor: pointer;
        /* Pointer cursor */
        font-size: 22px;
        /* Larger font size */
        padding: 10px;
        /* Add padding */
    }
}

li.no-toc {
    display: none;
}

figure.wp-caption {
    max-width: 100%;
    /* Ensure it does not exceed the width of its parent container */
    width: auto;
}

.vimeo-wrapper {
    max-width: 800px;
    /* Adjust this value to your preferred max width */
    margin: 0 auto;
    /* Centers the video if desired */
}

.responsive-vimeo-container {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
}

.responsive-vimeo-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (max-width: 759px) {
    .vimeo-wrapper {
        max-width: 100%;
        /* Adjust the max width for mobile devices */
    }

    /* This caused issues with videos of various sizes*/
    .responsive-vimeo-container {
        /*   height: 58vw; */
    }
}

/* Sets the Chipp bot height */
iframe#chipp-chat-widget-full {
    height: 90vh !important;
    /* 90% of viewport */
    max-height: 800px !important;
    /* but never more than 800px tall */
    width: 500px !important;
}

/* Change chatbot color */
#chipp-chat-bubble-container {
    background: #004789 !important;
}

/* Change chatbot chat bubble color */
#chipp-chat-bubble-container svg path {
    fill: #fff !important;
    stroke: #fff !important;
}

/*Add more shadow to the chatbot bubble */
#chipp-chat-btn {
    box-shadow:
        8px 20px 25px -5px rgb(0 0 0 / 0.2),
        3px 8px 10px -6px rgb(0 0 0 / 0.15) !important;
}

#chipp-chat-btn:hover {
    transform: scale(1.1);
    box-shadow:
        10px 28px 35px -5px rgb(0 0 0 / 0.22),
        4px 14px 16px -6px rgb(0 0 0 / 0.17) !important;
}

/* Float the fake Chipp bubble in the lower-right */
.agent-widget-float {
    position: fixed;
    right: 24px;
    /* Respect mobile safe areas; keep at least 16px from the bottom */
    bottom: calc(25px + env(safe-area-inset-bottom, 0px));
    z-index: 9999;
    pointer-events: none;
    /* container ignores clicks... */
}

.agent-widget-float #chipp-chat-btn {
    pointer-events: auto;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: none;
    background-color: #004789;
    /* your blue */
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.2),
        0 8px 10px -6px rgb(0 0 0 / 0.15);
}

.agent-widget-float #chipp-chat-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 30px -3px rgba(0, 0, 0, 0.2),
        0 4px 12px -4px rgba(0, 0, 0, 0.15);
}

.agent-widget-float #chipp-chat-btn:active {
    background-color: #00376b;
    /* darker blue when pressed */
    transform: scale(0.95);
    box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.25),
        0 2px 4px -2px rgba(0, 0, 0, 0.2);
}

.agent-widget-float #chipp-chat-bubble-container {
    width: 42px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.agent-widget-float #chipp-chat-bubble-container svg path {
    fill: #fff;
    stroke: #fff;
}


@media (max-width: 768px) {
    #gt_float_wrapper {
        top: 60px !important;
    }
}

/* ===== Support Agent CTA (agent-namespace) ===== */
.agent-card {
    background: linear-gradient(135deg, #054E88, #00A7E1);
    color: #fff;
    border-radius: 20px;
    padding: 2rem;
    margin: 1.5rem 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(5, 78, 136, .2);
}

.agent-card::before {
    content: "";
    position: absolute;
    inset: -50% -50% auto auto;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, .12) 0%, transparent 70%);
    border-radius: 50%;
}

/* Header row */
.agent-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
    /* adjusted */
}

/* Icon bubble */
.agent-avatar {
    width: 6rem;
    height: 6rem;
    /* adjusted */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    /* adjusted */
    backdrop-filter: blur(10px);
    /* from your snippet */
    color: #fff;
    /* adjusted */
}

.agent-avatar .fa-headset {
    font-size: 2rem;
    /* adjusted */
    line-height: 1;
}

/* Title + subtitle */
.agent-info {
    display: flex;
    flex-direction: column;
}

.agent-title {
    font-size: 2.4rem !important;
    font-weight: 700 !important;
    margin: 0 0 1rem 0;
    /* adjusted */
    color: #fff !important;
    line-height: 1.2 !important;
    font-style: normal !important;
}

.agent-subtitle {
    font-size: 1.4rem;
    margin: 0;
    color: #fff;
    opacity: .95;
    line-height: 1.3;
}

/* Body copy */
.agent-description {
    position: relative;
    z-index: 1;
    margin: 1rem 0 1.25rem;
    font-size: 1.5rem;
    line-height: 1.6;
    color: #fff;
}

.agent-description .agent-software {
    font-weight: 700;
}

/* CTA button */
.agent-actions {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
}

.agent-button {
    --agent-ring: rgba(255, 255, 255, .25);
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    /* adjusted */
    background: rgba(255, 255, 255, .22);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.5rem;
    /* adjusted */
    padding: 1.2rem 1.7rem;
    /* adjusted */
    border-radius: .75rem;
    border: 2px solid rgba(255, 255, 255, .35);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
    backdrop-filter: blur(8px);
}

.agent-button i.fa-headset {
    font-size: 1.5rem;
    /* adjusted */
}

.agent-button:hover {
    transform: translateY(-2px);
    color: white;
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    text-decoration: none;
}

.agent-button:focus-visible {
    outline: 3px solid var(--agent-ring);
    outline-offset: 2px;
}

/* Responsive */
@media (max-width: 48rem) {
    .agent-card {
        padding: 1.5rem;
    }

    .agent-title {
        font-size: 2rem;
    }

    .agent-subtitle {
        font-size: 1.1rem;
    }

    .agent-description {
        font-size: 1.25rem;
    }
}

@media (max-width: 768px) {

    .agent-widget-float #chipp-chat-btn,
    #chipp-chat-bubble-container,
    #chipp-close-icon-container {
        width: 65px !important;
        /* standard mobile size */
        height: 65px !important;
        border-radius: 50%;
    }

    .agent-widget-float #chipp-chat-bubble-container svg,
    #chipp-chat-bubble-container svg {
        width: 35px;
        /* scale icon inside */
        height: 35px;
    }

    #chipp-close-icon-container svg {
        width: 25px;
        /* scale icon inside */
        height: 25px;
    }

    /* Sets the Chipp bot height and width on mobile */
    iframe#chipp-chat-widget-full {
        height: 88vh !important;
        /* 88% of viewport on mobile*/
        width: 98% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        left: 0px !important;
        right: 0px !important;
    }
}

/* GTranslate Options */

/* keep items on one line */
.title-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    /* don't wrap to a new line */
}

/* let the title take remaining space; allow it to shrink */
.title-container .page-header,
.title-container h1 {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    /* prevent overflow issues */
}

/* pin the switcher to the right and don't let it shrink */
.gtranslate-block {
    margin-left: auto;
    flex: 0 0 auto;
    /* <-- stops squishing */
}

.gt_white_content {
    background-color: #3A6F96 !important;
}

.gt_languages a.glink span {
    color: #ffffff !important;
}

.gt_white_content a {
    border: none !important;
}

/* Remove the flag icons */
.gt_languages a.glink img {
    display: none !important;
}

/* Base link styles */
.gt_languages a.glink {
    display: inline-flex;
    align-items: center;
    position: relative;
    padding: 8px 12px;
    color: #fff !important;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: background 0.3s ease, color 0.3s ease;
    box-sizing: border-box;
}

/* Hover effect */
.gt_languages a.glink:hover {
    /* background-color: #447AA6; */
    background: #ffffff30;
}

/* Active (current) language */
.gt_languages a.glink.gt-current-lang {
    /*background-color: #447AA6;*/
    background: #ffffff30;
}

/* Equal column sizing */
.gt_white_content .gt_languages {
    display: flex;
    flex-flow: column wrap;
    overflow-x: hidden;
    align-content: stretch;
    /* make columns align evenly */
}

.gt_white_content .gt_languages a.glink {
    min-width: 120px;
    /* optional safeguard */
}

.input-container:last-child {
    background-color: white;
}

/* Base popup */
.gt_switcher-popup {
    white-space: nowrap;
    /* keep “English ▾” on one line */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #2A689A;
    /* new base background */
    border: 2px solid #5486AE;
    /* new base border */
    color: #fff !important;
    font-weight: 600;
    font-size: 14px;
    padding: 4px 12px;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.gt_switcher-popup span {
    font-size: 17px !important;
    margin-right: 0 !important;
}

/* Remove flag */
.gt_switcher-popup img {
    display: none !important;
}

/* Insert Font Awesome language icon */
.gt_switcher-popup::before {
    content: "\f1ab";
    /* Font Awesome "language" icon unicode */
    font-family: "Font Awesome 7 Free";
    /* or 7 Free depending on your FA version */
    font-weight: 900;
    font-size: 14px;
    margin-right: 6px;
    color: #fff;
}

/* Arrow ▼ styling */
.gt_switcher-popup span:last-child {
    color: #fff !important;
    font-size: 10px !important;
    margin-left: 4px;
}

/* Hover + active */
.gt_switcher-popup:hover,
.gt_switcher-popup.gt-current-lang,
.gt_switcher-popup.active {
    background-color: #447AA6;
    /* lighter blue hover */
    border-color: #8EAFC9;
    /* lighter border */
}

/* Smooth fade when GTranslate flips display:none -> block */
@keyframes gtFadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.gt_black_overlay[style*="display: block"],
.gt_white_content[style*="display: block"] {
    animation: gtFadeIn .22s ease-out both;
}

/* Keep the softer overlay color (no need for background transition) */
.gt_black_overlay {
    background: rgba(0, 0, 0, 0.4) !important;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {

    .gt_black_overlay[style*="display: block"],
    .gt_white_content[style*="display: block"] {
        animation: none;
    }
}

@media (max-width: 769px) {
    #search-box {
        justify-content: flex-start;
        align-items: center !important;
        gap: 20px;
    }

    div.donate-button {
        padding: 0 !important;
        margin-right: 0;
    }

    a.btn-download {
        margin: 0;
    }

    .navbar-form {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .navbar-form .form-group {
        margin-bottom: 0 !important;
    }

    .navbar-form .gsc-control-searchbox-only .gsc-input {
        width: 37vw !important;
        max-width: 225px !important;
    }

    .navbar-default #nav-list {
        padding-top: 0 !important;
        padding-bottom: 8px;
    }

    .gsc-search-button-v2 {
        padding-right: 0 !important;
        padding-left: 0 !important;
        width: 50px !important;
    }

    .navbar-form .gsc-search-button-v2 svg {
        margin-left: 0 !important;
    }

    .navbar-header {
        margin-bottom: 0px;
        display: flex;
        align-items: center;
        /* vertical centering */
    }

    .spacer {
        flex: 1;
        /* take all available remaining space */
    }

    .nav-left,
    .nav-right {
        display: flex;
        align-items: center;
    }

    .nav-left {
        justify-content: flex-start;
    }

    .nav-right {
        justify-content: flex-end;
    }

    .navbar-default a.logo {
        margin-top: 0;
    }

    a.logo img {
        width: 50% !important;
    }

    .navbar-toggle {
        margin-right: 0;
    }

    .main-menu-toggle-test {
        padding: 1px 8px;
    }

    /* Remove borders and shadow from search form in the mobile menu */
    .navbar-default .navbar-form,
    .navbar-default .navbar-collapse {
        border: none !important;
        /* removes the 1‑px top and bottom borders */
        box-shadow: none !important;
        /* removes the inset shadow */
    }

    img.sps-sidebar-logo {
        width: 20vw;
    }
}

/* small-screen sizing so it fits comfortably */
@media (max-width: 480px) {
    .gt_switcher-popup {
        font-size: 13px;
        padding: 2px 10px;
    }

    .gt_switcher-popup::before {
        font-size: 13px;
    }

    .gt_switcher-popup span:last-child {
        font-size: 10px;
    }

    /* optional: scale title so both fit */
    .title-container .page-header,
    .title-container h1 {
        font-size: clamp(18px, 5.5vw, 32px);
    }

    .gt_languages a.glink span {
        font-size: 17px !important;
    }
}

span.last-crumb {
    font-weight: 700;
}

/* New accordion behavior/style */
/* Hide line breaks */
.accordion>br,
.accordion>br+br {
    display: none;
}

/* Container styling - remove single border */
.accordion {
    margin: 8px 0;
    margin-bottom: 4rem;
}

/* Each accordion item gets its own border */
.accordion-title {
    list-style: none;
    cursor: pointer;
    padding: 14px 16px 14px 56px;
    position: relative;
    user-select: none;
    background: #fafafa;
    color: #222;
    transition: background-color .32s ease, color .32s ease;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    line-height: 150%;
    margin: 16px 0 0 0;
}

.accordion-title:first-of-type {
    margin-top: 0;
}

/* Caret arrow */
.accordion-title::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
    transition: transform .32s ease;
    background: none;
    border-radius: 0;
    color: inherit;
    font-weight: normal;
    margin: 0;
    padding: 0;
}

/* Open state: header color + caret rotation */
.accordion-title[aria-expanded="true"] {
    background: #eef6ff;
    color: #0b5fcc;
    cursor: default;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.accordion-title[aria-expanded="true"]::before {
    transform: translateY(-50%) rotate(-135deg);
}

/* Base closed state */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 20px 0 56px;
    /* No vertical padding when closed */
    border: 1px solid #e0e0e0;
    border-top: none;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    margin-top: -1px;
    background: #fff;
    transition:
        max-height .32s ease,
        opacity .28s ease,
        padding .28s ease;
}

/* Open state */
.accordion-title[aria-expanded="true"]+.accordion-content {
    max-height: 1000px;
    /* Large enough value */
    opacity: 1;
    padding: 20px 20px 20px 56px;
}

/* Kill the plugin's display:none so transitions can run */
.accordion .accordion-content {
    display: block !important;
}

/* (optional safety) If the plugin writes inline display:none */
.accordion .accordion-content[style*="display: none"] {
    display: block !important;
}

/* Modern styling for download table */
.download {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background-color: white;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.download thead {
    background-color: #f8f9fa;
}

.download th {
    text-align: left;
    padding: 12px 16px;
    font-weight: 400;
    font-size: 13px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e0e0e0;
}

.download tbody tr {
    transition: background-color 0.15s ease;
}

.download tbody tr:hover {
    background-color: #f8fafb;
}

.download td {
    padding: 14px 16px;
    font-size: 14px;
    color: #555;
    border-top: 1px solid #f0f0f0;
}

.download tbody tr:first-child td {
    border-top: none;
}

.getfile {
    font-weight: 600;
    color: #00537a;
    font-size: 15px;
    text-decoration: none;
}

.getfile:hover {
    color: #003d5c;
    text-decoration: underline;
}

.filemeta {
    color: #888;
    font-size: 13px;
}

/* Special padding for accordion content with download tables */
.accordion-title[aria-expanded=true]+.accordion-content:has(.download),
.accordion-content:has(.download) {
    padding: 10px 27px;
}

.accordion-content .download {
    border-radius: 0px;
    box-shadow: none;
}

/* Contact Form Styling Mapping to Contact Form 7 Classes */
h2.form-heading {
    margin: 40px 0 20px 0;
    border-bottom: 2px solid #00a7e0;
    padding-bottom: 8px;
    color: #005a9c;
}

/* Target the p tags CF7 uses for wrapping */
.wpcf7-form p {
    margin-bottom: 25px;
}

.wpcf7-form label {
    display: block;
    font-weight: 600;
    color: #333;
}

.wpcf7-form label i {
    font-weight: 400;
    color: #666;
    font-size: 0.9em;
}

/* Styling for p tags used as labels (CF7 alternative setup) */
/* This targets p tags that do NOT contain any form controls or the submit button elements */
.wpcf7-form p:not(:has(.wpcf7-form-control-wrap)):not(:has(.wpcf7-submit)):not(:has(.wpcf7-spinner)):not(:has(.cf-turnstile)):not(:has(input)):not(:has(select)):not(:has(textarea)) {
    margin-bottom: 5px;
    font-weight: 600;
    color: #333;
}

/* Ensure italicized text in these p labels also follows the same style as labels */
.wpcf7-form p:not(:has(.wpcf7-form-control-wrap)):not(:has(.wpcf7-submit)):not(:has(.wpcf7-spinner)):not(:has(.cf-turnstile)):not(:has(input)):not(:has(select)):not(:has(textarea)) i {
    font-weight: 400;
    color: #666;
    font-size: 0.9em;
}

/* Target the wrapper spans CF7 uses */
.wpcf7-form-control-wrap {
    display: block;
    margin-top: 8px;
}

/* Global Input Styling */
.wpcf7-form-control {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1rem;
    font-family: inherit;
    font-size: 1.5rem;
    font-weight: normal;
}

/* Specific overrides for text areas */
.wpcf7-textarea {
    min-height: 150px;
    resize: vertical;
}

.wpcf7-form-control:focus {
    border-color: #0073e6;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 115, 230, 0.2);
}

/* Cloudflare Turnstile Styling */
.wpcf7-turnstile {
    padding: 15px;
    background: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 4px;
    display: inline-block;
}

/* Submit Button Styling */
.wpcf7-submit {
    color: white;
    padding: 8px 30px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    font-size: 1.5rem;
    cursor: pointer;
    width: auto;
    /* Buttons shouldn't necessarily be full width */
}

/* ── Blockquote system ─────────────────────────────────────────────────────── */
/* Moved from job-openings.css — intentionally site-wide on the main site.     */

/* Standard variant — info box */
blockquote {
    background: #f8fafc;
    border: 1px solid rgba(226,232,240,0.7);
    border-radius: 40px;
    padding: 28px 32px 28px 42px;
    margin: 40px 0;
    font-style: normal;
    color: #334155;
    font-size: 16px;
    line-height: 1.625;
    box-shadow: none;
    position: relative;
    overflow: hidden;
}

/* Cyan accent bar — clips cleanly to the rounded corners via overflow:hidden */
blockquote::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    background: #0090c8;
}

/* Title: use <h4> as the first element inside a standard blockquote */
blockquote > h4:first-child {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    font-size: 15px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #002b5c;
}

blockquote > h4:first-child::before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content: '\f05a';
    font-size: 18px;
    flex-shrink: 0;
    line-height: 1;
}

blockquote p:last-child,
blockquote ul:last-child,
blockquote ol:last-child {
    margin-bottom: 0;
}

/* Links inside blockquotes */
blockquote a {
    color: #0056b3;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: color 0.1s, text-decoration-color 0.1s;
}

blockquote a:hover {
    color: #0090c8;
    text-decoration-color: #0090c8;
}

/* List styling inside blockquotes */
blockquote li {
    margin-bottom: 8px;
}

blockquote ul li::marker,
blockquote ol li::marker {
    color: #002b5c;
}

blockquote li > strong:first-child {
    color: #002b5c;
}

/* Impact variant — large typographic pull quote */
@keyframes blockquote-impact-in {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}

blockquote.impact {
    background: none;
    border: none;
    border-radius: 0;
    overflow: visible;
    padding: 8px 0 8px 32px;
    margin: 40px 0;
    box-shadow: none;
    position: relative;
    font-size: clamp(22px, 2.5vw, 30px);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.025em;
    color: #334155;
    animation: blockquote-impact-in 0.7s ease-out both;
}

blockquote.impact::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    border-radius: 3px;
    background: #0090c8;
    box-shadow: 0 0 10px rgba(0,144,200,0.15);
}

blockquote.impact p {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin-bottom: 0;
}