/* Custom styles for specific panels */

/* Base Typography - Increased font weights for better readability */
body,
body.is-preload,
body.is-preload *,
body.is-preload *:before,
body.is-preload *:after,
body.is-preload *:hover,
body.is-preload *:active,
body.is-preload *:focus,
input,
select,
textarea,
button,
.button {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
    font-weight: 400 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings with increased weight */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.panel h1,
.panel h2,
.panel h3,
.panel h4,
.panel h5,
.panel h6,
#wrapper h1,
#wrapper h2,
#wrapper h3,
#wrapper h4,
#wrapper h5,
#wrapper h6 {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
    font-weight: 600 !important;
}

/* Hero section specific */
.panel.banner h1,
.panel.banner h2,
.panel.banner h3 {
    font-weight: 600 !important;
    letter-spacing: -0.02em;
}

/* Paragraphs and general text */
p,
li,
span,
div {
    font-weight: 400 !important;
}

/* Form Elements */
input,
select,
textarea,
button,
.button,
input[type="text"],
input[type="email"],
input[type="submit"],
input[type="reset"],
input[type="button"],
button[type="submit"] {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
}

/* First panel */
.panel.banner.right:first-of-type {
    background-color: #000000 !important;
}

/* Portfolio panel */
#portfolio {
    background-color: #000000 !important;
}

/* All testimonial spotlight panels */
.panel.spotlight.large {
    background-color: #000000 !important;
}

/* All testimonial spotlight panels */
.panel.spotlight.large {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.5rem 0 !important;
    min-height: 0 !important;
}

/* Circular image containers */
.image-container.img-circle {
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    width: 150px;
    height: 150px;
    min-width: 150px;
    min-height: 150px;
    margin: 0 auto 1.5rem auto;
    border: 3px solid rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
}

/* Ensure images fill their circular containers */
.image-container.img-circle img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Content styling */
.panel.spotlight.large .content {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 1.5rem;
    text-align: center;
}

/* Adjust space between name and role */
.panel.spotlight.large .content h4 + p {
    margin-top: 0.002em !important;
    margin-bottom: 0.0002em !important;
}

.testimonial {
    text-align: center;
    padding: 0 1rem;
}

/* Center aligned columns in panels */
.panel > .inner.columns.aligned {
    -moz-align-items: center !important;
    -webkit-align-items: center !important;
    -ms-align-items: center !important;
    align-items: center !important;
}

/* Responsive adjustments */
/* Make content full width on mobile */
@media screen and (max-width: 980px) {
    .panel.spotlight.large .content {
        max-width: 100%;
        padding: 0 1.25rem;
    }
}

@media screen and (max-width: 736px) {
    .image-container.img-circle {
        width: 120px;
        height: 120px;
        margin: 0 auto 1.5rem;
    }
    
    .panel.spotlight.large {
        padding: 1.25rem 0 !important;
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        min-height: 100vh;
    }
    
    .panel.spotlight.large .content {
        margin: auto 0;
    }
}