/* CSPH 2026 Theme Specific CSS */

@import url("https://use.typekit.net/tcw4zdk.css");

:root {
    --primary-gray: #6a737b;
    --primary-green: #54b948;
    --primary-white: #ffffff;
    --primary-orange: #f26122;
    --primary-blue: #0d76bd;

    --secondary-light-blue: #16A0db;
    --secondary-dark-blue: #002B54;
    --secondary-orange: #faa634;
    --secondary-light-orange: #fdb913;
    --secondary-green: #a0cf67;

}

.dark-blue{

    color: var(--secondary-dark-blue);
}

.primary-blue{

    color: var(--primary-blue);
}

.primary-orange{

    color: var(--primary-orange);
}


.white{

    color: var(--primary-white);
}

.primary-green{

    color: var(--primary-green);
}

.bg-primary-green{
    background-color: var(--primary-green);
}

.bg-secondary-orange{
    background-color: var(--secondary-orange);

}

.bg-secondary-light-blue{
    background-color: var(--secondary-light-blue);

}

.bg-primary-orange{
    background-color: var(--primary-orange);

}

.bg-primary-blue{

    background-color: var(--primary-blue);

}
.bg-dark-blue{

    background-color: var(--secondary-dark-blue);
    opacity: 100%;

}

.page{

    margin: 0 !important;
}

.font-proxima{

    font-family: "proxima-nova", san-serif;

}

#top-nav{

    display: none;
}

.main-menu{


    background-color: #fff;
    position: sticky;
    top: 0;
    border-bottom: thin solid #002b54;
    z-index: 999999;
}
#site-navigation{

    margin-top: 2.5rem;
}

#hero{

}
#hero img{
    min-width: 100%;
}

.user-select-h2{
    min-height: 60%;
}

.user-block{
    background-size: cover;
}
.blue-user-block{

    background: url(../img/job-seekers-mask.png);
    background-color: var(--primary-blue);
    background-size: cover;


}


.orange-user-block{

    background: url(../img/woman-at-desk-mask.png);
    background-color: var(--primary-orange);
    background-size: cover;


}


.light-orange-user-block{

    background: url(../img/young-adult-mask.png);
    background-color: var(--secondary-orange);
    background-size: cover;


}

.light-blue-user-block{

    background: url(../img/vets-mask.png);
    background-color: var(--secondary-light-blue);
    background-size: cover;


}

#footer{

    background-color: var(--secondary-dark-blue);
    color: var(--primary-white);

}



/* Flickity Styles */

.carousel-cell {
    width: 100%; /* full width */
    height: 160px; /* height of carousel */
    margin-right: 10px;
    padding-bottom: 2rem;
}

/* Remove all spacing between columns */
.row.g-0 > [class*="col"] {
    padding: 0 !important;
}

/* Make all user-blocks touch horizontally on desktop */
.user-block {
    min-height: 650px; /* adjust as needed */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px 20px;
    background-size: cover;
    background-position: center;
    margin: 0;
    border: 0;
}

/* Remove any default spacing between adjacent blocks */
@media (min-width: 768px) {
    .user-block {
        width: 100%;
        border-right: none;
    }

    /* Ensure columns touch edge-to-edge */
    .row.g-0 .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Fixed-height wrapper for text swap */
.swap-fixed-height {
    height: 60%; /* match tallest text */
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Prevent text swap from affecting layout */
.swap-text {
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
}

/* Button pinned to bottom */
.button-wrap {
    margin-top: auto;
    padding-bottom: 20px;
}

/* Remove default margins that create gaps */
h1, h2 {
    margin: 0 !important;
}

/* Location Styles */

.card-locations{
    border-radius: 0 !important;
}

.btn-small-locations {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

/* ✅ Button styling */
.btn-small-locations {
    background-color: #F26122;
    border: none;
    border-radius: 30px; /* more rounded */
    padding: 10px 20px;
}

.btn-small-locations:hover {
    background-color:rgba(0, 0, 0, 0.5);
}




