/* Default Global Overrides */
:root {
    --primary-color: #227066 !important;
    --secondary-color: #227066 !important;
    --accent-color: #f5f0ee !important;
}

/* Button color override (swapping primary/secodnary) */
.bg-primary {
    background: var(--secondary-color) !important;
}

.text-primary {
    color: var(--secondary-color) !important;
}

body .action,
body a.action,
body span.action,
body button.action {
    font-size: 0.785rem;
    border-radius: 20px;
}

#featured .hero-featured button,
#featured .hero-featured a,
.tile a span,
.tile button span,
#lc-carousel a,
#lc-carousel .lc-button {
    border-radius: 20px;
}

.action:hover,
.hover\:bg-primary:hover,
.hover\:bg-secondary:hover {
    background: #333131 !important;
}

#welcome-ribbon {
    background: #f5f0ee !important;
    height: 10px;
}

#welcome-message {
    display: none;
}

nav:has(ol.breadcrumb) {
    background: var(--accent-color) !important;
}

#main nav ol.breadcrumb * {
    color: #000 !important;
}

body.learning #main>section:first-of-type {
    background-color: var(--accent-color) !important;
}

body.learning #main>section h1,
body.learning #main>section p {
    color: black !important;
}

body.learning #lc-carousel {
    margin-top: 1rem;
}

section#lc-carousel {
    background: var(--accent-color) !important;
}

section#lc-carousel h2,
section#lc-carousel h3,
section#lc-carousel p {
    color: black !important;
}

/* END Default Global Overrides */

.tile a>span,
.tile button>span,
#guest-login-body form button {
    background: var(--secondary-color) !important;
}

.tile a>span:hover,
.tile button>span:hover,
#guest-login-body form button:hover {
    background: var(--primary-color) !important;
}

/* #content-body h3 {
  margin-top: 1.6rem;
}

#content-body {
  padding: 2rem 0;
} */

.custom-page .no-tailwindcss-base h1,
.custom-page .no-tailwindcss-base h2,
.custom-page .no-tailwindcss-base h3,
.custom-page .no-tailwindcss-base p {
    color: #333131 !important;
}

body.custom-page h2:first-of-type {
    margin-bottom: 0.5rem;
}

body.content:not(body.custom-page) h1{
    color:rgb(31, 75, 136) !important; 
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.no-tailwindcss-base h2, .no-tailwindcss-base h3, .no-tailwindcss-base h4, .no-tailwindcss-base h5, .no-tailwindcss-base h6 {
    font-weight: bold;
}

.custom-page .no-tailwindcss-base #crediblemind-assessments-content h3 {
    color: white !important;
}

.resource-hero {
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    height: 300px;
    position: relative;
}

.resource-hero-text {
    width: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 20px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    font-family: var(--primary-font);
}

.resource-hero-text>h1 {
    margin: 0 !important;
    font-size: 1.75rem !important;
}

.resource-hero-text>h2 {
    font-size: 1.25rem !important;
}

.resource-content * {
    font-family: var(--primary-font);
}

.resource-content.two-column ul {
    margin: 0 0 1rem 0;
}

#thoughts-of-the-week>h3 {
    font-weight: bold;
}

#thoughts-of-the-week img {
    margin-bottom: 1rem;
}

/* Leadership Team */
article#copy:has(#leadership-team)>div h1 {
    font-size: 30px !important;
    color: rgb(31, 75, 136) !important;
}

#leadership-team>div {
    margin-bottom: 1rem;
}

#leadership-team h2 {
    font-weight: bold;
    font-size: 1.25rem;
}

/* 2nd of type h2 */
#leadership-team h2:nth-of-type(2) {
    margin-top: 2rem;
}

#leadership-team .row {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

#leadership-team .card {
    max-width: max-content;
}

#leadership-team .card img {
    width: 220px;
}

#leadership-team .container {
    margin-top: -3rem;
    text-align: center;
}

#leadership-team .container p {
    margin-bottom: 0;
}

/* END Leadership Team */

/* CredibleMind */
#crediblemind-header {
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-image: url("https://cdn.personaladvantage.com/images/posters/training_banner.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
}

#crediblemind-header h1 {
    font-size: 22px;
    background: rgba(255, 355, 355, 0.6);
    padding: 3rem;
    border-radius: 8px;
}

#crediblemind-header p {
    max-width: 90%;
    font-family: var(--secondary-font);
}

#crediblemind-subheader {
    margin: 1rem auto;
    text-align: center;
    margin: 2rem auto;
    max-width: 90%;
}

#crediblemind-subheader p {
    margin: 1rem 0;
}

#crediblemind-subheader h2 {
    font-size: 22px;
    font-weight: normal;
}

#crediblemind-subheader h2 span {
    font-weight: bold;
}

#crediblemind-subheader img {
    margin: auto;
}

.crediblemind a {
    font-family: var(--primary-font);
}

.crediblemind .curated-content {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 20px;
    height: auto;
    max-width: 1800px;
    margin: auto;
}

.crediblemind .curated-content a.assessment-card {
    height: 380px;
    width: auto;
    max-width: 90%;
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    box-shadow: 1px 1px 1px 1px;
    color: rgba(0, 0, 0, 0.3);
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: all ease-in-out 0.3s;
}

.crediblemind .curated-content a.assessment-card:hover {
    box-shadow: 2px 2px 2px 2px;
    scale: 1.01;
}

.crediblemind .curated-content a.assessment-card .assessment-action {
    display: none;
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}

.crediblemind .curated-content a.assessment-card:hover .assessment-action {
    display: flex;
}

.crediblemind .curated-content a.assessment-card footer {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 0 15px;
    height: 33%;
    width: 100%;
    bottom: 0;
    position: absolute;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.crediblemind .curated-content a.assessment-card footer h3 {
    font-size: 22px;
    text-align: center;
    font-family: var(--primary-font);
}

/* accordion */

#crediblemind-assessments h2.curated-sitemap-heading {
    width: 100%;
    text-align: center;
    margin: 2rem 0;
    font-size: 22px;
}

#crediblemind-assessments .accordion,
#custom-trainings .accordion {
    width: 90%;
}

#crediblemind-assessments .accordion>button,
#custom-trainings .accordion>button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid black;
    width: 100%;
}

#crediblemind-assessments .accordion>button>div,
#custom-trainings .accordion>button>div {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

#crediblemind-assessments .curated-sitemap h3,
#custom-trainings .curated-sitemap h3 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-family: var(--primary-font);
    font-weight: normal;
}

#crediblemind-assessments .curated-sitemap h3 span,
#custom-trainings .curated-sitemap h3 span {
    font-weight: normal;
    font-size: 12px;
}

#crediblemind-assessments .curated-sitemap button svg,
#custom-trainings .curated-sitemap button svg {
    font-weight: normal;
    font-size: 20px;
    color: black;
    opacity: 0.6;
}

#crediblemind-assessments .curated-sitemap button:hover svg,
#custom-trainings .curated-sitemap button:hover svg {
    opacity: 1;
}

.accordion ul li {
    display: list-item;
}

.accordion ul li:nth-child(n + 4) {
    display: none;
}

.accordion ul.expanded li {
    display: list-item;
}

.accordion ul li a {
    color: black;
    text-decoration: underline;
    text-decoration-color: rgba(0, 0, 0, 0.3);
}

.accordion ul li a:hover {
    text-decoration-color: rgba(0, 0, 0, 1);
}

.accordion button[data-open="true"] .block {
    display: none !important;
    /* Hide the 'carrot down' SVG when open */
}

.accordion button[data-open="true"] .hidden {
    display: block !important;
    /* Show the 'carrot up' SVG when open */
}

/* end accordion */
/*END Credible Mind*/

#trainings-heading {
    text-align: center;
    margin: 1rem 0 2rem 0;
}

.two-column a.action {
    margin: 10px 0;
    justify-content: center;
    border-radius: 2rem;
    font-size: 0.75rem;
    text-align: center;
    font-family: var(--primary-font);
}

@media (min-width: 768px) {
    .home #featured .hero-left {
        width: 75%;
    }

    .resource-hero {
        height: 500px;
    }

    .resource-hero-text {
        padding: 5rem;
    }

    .resource-hero-text>h1 {
        font-size: 2.5rem !important;
    }

    .resource-hero-text>h2 {
        font-size: 2rem !important;
    }

    .resource-hero-text>p {
        font-size: 1.75rem;
    }

    /* Leadership Team */
    #leadership-team h2 {
        font-size: 1.5rem;
    }

    #leadership-team .row {
        flex-direction: row;
    }

    /* END Leadership Team */

    /* CredbleMind */
    #crediblemind-header {
        height: 500px;
    }

    #crediblemind-header h1 {
        font-size: 2rem;
    }

    #crediblemind-header p {
        font-size: 22px;
    }

    #crediblemind-header .action {
        font-size: 12px;
    }

    /* END CredibleMind */

    .two-column {
        column-count: 2;
        column-gap: 50px;
    }

    .two-column>* {
        display: inline-block;
        width: 100%;
    }

    .two-column a.action {
        font-size: 1rem;
    }
}

@media screen and (min-width: 1256px) {
    #crediblemind-header h1 {
        font-size: 2.75rem;
    }

    #crediblemind-header p {
        max-width: 70%;
    }

    #crediblemind-subheader>h2 {
        font-size: 22px;
    }

    #crediblemind-subheader {
        max-width: 66%;
    }

    #crediblemind-assessments .curated-sitemap,
    #custom-trainings .curated-sitemap {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4rem;
        margin: auto;
        max-width: 90%;
    }

    #crediblemind-assessments .accordion,
    #custom-trainings .accordion {
        width: 100%;
    }

    /* #crediblemind-assessments .accordion > button {
    width: 70%;
  } */
}