/* Surface pages styles (SurfaceStandard, SurfaceWithModal) */

/* CSS Custom Properties for dynamic Umbraco values */
:root {
    --section-masthead-cta-color: #018abf; /* Default fallback */
    --section-masthead-heading-color: #ffffff; /* Default fallback */
}

.surface-page .masthead {
    height: 84vh;
    background-color: #1a3054;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.surface-page .masthead-overlay {
    /* Dynamic overlay color from Umbraco */
}

/* Surface With Modal page specific background styles */
.surface-with-modal-page .masthead {
    /* Background image set via inline style with Umbraco value */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.surface-with-modal-page .masthead-overlay {
    /* Background color set via inline style with Umbraco value */
}

.surface-with-modal-page .section-masthead {
    /* Background image set via inline style with Umbraco value */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 50vh;
}

.surface-page .btn-cta {
    background-color: transparent !important;
    border: 5px solid;
    color: #1a3054 !important;
    border-radius: 0;
}

.surface-page .btn-cta:hover {
    background-color: #1a3054 !important;
    color: #ffffff !important;
    border-radius: 0;
}

.surface-page #details p {
    font-size: 1.5rem !important;
}

.surface-page #details a {
    font-size: 1.5rem !important;
    text-decoration: none;
    color: #212529;
}

.surface-page #details a:hover {
    text-decoration: underline;
    text-decoration-color: #018abf;
}

/* Surface With Modal page specific styles */
.surface-with-modal-page .font-md-loc {
    font-size: 4.1rem;
}

.surface-with-modal-page .btn-cta-inv {
    background-color: #1a3054 !important;
    border: 5px solid #1a3054;
    color: #ffffff !important;
    border-radius: 0;
}

.surface-with-modal-page .btn-cta-inv:hover {
    background-color: #ffffff !important;
    color: #1a3054 !important;
    border-radius: 0;
}

.surface-with-modal-page .intro p {
    font-size: 1.5rem !important;
}

.surface-with-modal-page .mod-bod p {
    font-size: 1.3333rem !important;
}

.surface-with-modal-page .btn-cust {
    background-color: var(--section-masthead-cta-color);
    color: #ffffff;
    border-radius: 30px;
}

.surface-with-modal-page .btn-cust:hover {
    background-color: #ffffff;
    color: var(--section-masthead-cta-color);
    border-radius: 30px;
}

.surface-with-modal-page .ui-modal-header {
    border-radius: 0;
    height: 200px;
    border-bottom: none;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.surface-with-modal-page .ui-modal-content {
    border-radius: 0;
}

.surface-with-modal-page .ui-modal-body {
    border-radius: 0;
}

.surface-with-modal-page .project-section hr,
.surface-with-modal-page .project-section-hr {
    border-bottom: #1a3054 5px;
}

.surface-with-modal-page .section-masthead {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 50vh;
}

.surface-with-modal-page .contact-info-bar {
    background-color: #1a3054;
    color: #ffffff;
}

.surface-with-modal-page .card-alt-section {
    background-color: rgba(235, 232, 70, 0.4);
}

@media only screen and (max-width: 600px) {
    .surface-with-modal-page .font-xl {
        font-size: 7rem;
    }
}