/* ==========================================================================
   Block: Simple Main Header (acf/kf-simple-main-header)
   ========================================================================== */

.kf-simple-main-header {
    box-sizing: border-box;
    background-color: var(--smh-bg, #FFF);
    color: var(--smh-color, #FFFFFF);
    padding-top: calc(var(--main-header-height) + 80px);
    padding-bottom: 80px;
    width: 100%;
    border-bottom-right-radius: 60px;
    border-bottom-left-radius: 60px;

    margin-block-start: 0px;
}

.kf-simple-main-header *,
.kf-simple-main-header *::before,
.kf-simple-main-header *::after {
    box-sizing: border-box;
}

/* ---------- Inner container ------------------------------------------------ */

.kf-simple-main-header__inner {
    /* margin: 0 auto; */
    /* padding: 0 24px; */

    max-width: var(--wp--style--global--content-size);
    margin-left: auto !important;
    margin-right: auto !important;
}

.kf-simple-main-header__inner--with-media {
    display: flex;
    align-items: center;
    gap: 60px;
}

/* ---------- Content column ------------------------------------------------- */

.kf-simple-main-header__content {
    flex: 1 1 55%;
    min-width: 0;
}

/* ---------- Media column --------------------------------------------------- */

.kf-simple-main-header__media {
    flex: 1 1 45%;
    min-width: 0;
}

/* ---------- Overline ------------------------------------------------------- */

.kf-simple-main-header__overline {
    margin: 0;

    font-weight: 400;
    font-size: var(--wp--preset--font-size--default);
    line-height: 130%;
    letter-spacing: 0%;
}

/* ---------- Title ---------------------------------------------------------- */

.kf-simple-main-header__supertitle.kf-simple-main-header__supertitle {
    font-family: Degular;
    font-weight: 500;
    font-size: clamp(34px, 27.45px + 2.05vw, 52px);
    line-height: .95;

    color: #C5EAFF;
    
    margin: .3em 0;
}

.kf-simple-main-header__title.kf-simple-main-header__title {
    font-family: Degular;
    font-weight: 500;
    font-size: var(--wp--preset--font-size--x-80);
    line-height: .95;
    
    margin: .2em 0;
}

/* ---------- Subtitle ------------------------------------------------------- */

.kf-simple-main-header__subtitle {
    margin: 0;
    font-weight: 400;
    font-size: var(--wp--preset--font-size--default);
    line-height: 130%;
}

/* ---------- Buttons -------------------------------------------------------- */

.kf-simple-main-header__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    margin-top: 40px;
}

.kf-simple-main-header__button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease,
                background-color 0.2s ease,
                color 0.2s ease,
                border-color 0.2s ease;

    border-radius: 100px;

    font-family: Degular;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    text-align: center;
}

/* Default (solid) variant */
.kf-simple-main-header__button--default,
.kf-simple-main-header__button--default:visited {
    background-color: #5F61FF;
    color: #FFF;
    border: 3px solid #5F61FF;
}

.kf-simple-main-header__button--default:hover {
    opacity: 0.85;
    color: #FFF;
}

/* Outline variant */
.kf-simple-main-header__button--outline,
.kf-simple-main-header__button--outline:visited {
    background-color: transparent;
    color: var(--smh-color, #FFFFFF);
    border: 3px solid var(--smh-color, #FFFFFF);
}

.kf-simple-main-header__button--outline:hover {
    opacity: 0.85;
    /* background-color: var(--smh-color, #FFFFFF); */
    color: var(--smh-color, #FFFFFF);
}

/* Button icon */
.kf-simple-main-header__button-icon {
    display: block;
    flex-shrink: 0;

    transition: transform 0.2s ease;
}

.kf-simple-main-header__button--outline:hover .kf-simple-main-header__button-icon {
    transform: translateX(4px);   
}

/* ---------- Media elements ------------------------------------------------- */

.kf-simple-main-header__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.kf-simple-main-header__custom-html {
    width: 100%;
}

/* ---------- Editor placeholder --------------------------------------------- */

.kf-simple-main-header__placeholder {
    padding: 40px;
    background: #f0f0f0;
    text-align: center;
    border: 2px dashed #ccc;
    border-radius: 4px;
    color: #666;
}

/* ---------- Responsive ----------------------------------------------------- */

@media (max-width: 782px) {
    .kf-simple-main-header {
    }

    .kf-simple-main-header__inner--with-media {
        flex-direction: column;
        gap: 40px;
    }

    .kf-simple-main-header__content,
    .kf-simple-main-header__media {
        flex: 1 1 100%;
    }

    .kf-simple-main-header__title {
    }

    .kf-simple-main-header__subtitle {
    }

    .kf-simple-main-header__buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .kf-simple-main-header__button {
        justify-content: center;
    }
}