/**
 * GLOBAL (GENERAL) STYLES
 * This file is loaded in both the WordPress frontend and the backend.
 */



/* LAYOUT / GRID
==================================================================================================== */

body .is-layout-constrained > .wp-block-post-content {
    max-width: unset;
}

:where(.is-style-content-section, .content-section),
body.page-template-page-no-title .wp-block-post-content:not(:has(> :where(.is-style-content-section, .content-section))),
body.page-template-default .site-main {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    padding-top: var(--wp--custom--spacing--section);
    padding-bottom: var(--wp--custom--spacing--section);
}

:where(.wp-site-blocks) > .site-main,
footer.site-footer {
    margin-top: 0;
}



/* TYPOGRAPHY 
==================================================================================================== */

b, strong {
    font-weight: 600;
}

h1, h2, h3, h4, h5, h6 {
    margin-block: 0;
}

a:not([class]) {
    color: inherit;
    text-underline-offset: .25ex;
    text-decoration-thickness: .15ex;
    transition: .2s ease-in-out;

    &:hover, &:focus-visible {
        text-decoration-color: inherit;
        text-decoration-thickness: .25ex;
        text-underline-offset: .5ex;
    }
}

:root :where(.is-layout-constrained) > p,
:root :where(.is-layout-flow) > p {
    margin-block-start: 1rem;
}



/* VARIOUS BLOCK STYLES 
==================================================================================================== */

.wp-block-image.is-style-kgt-slightly-rounded-image img {
    border-radius: var(--wp--custom--border-radius--regular);
}


.wp-block-file * + .wp-block-file__button {
    display: inline-flex;
    gap: 0.5rem;
}
:root :where(.wp-block-file.has-background) {
    padding: 1.25em 2.375em;
    border-radius: var(--wp--custom--border-radius--small);
}


:root :where(p.has-background) {
    border-radius: var(--wp--custom--border-radius--small);
}



/* PATTERN & STYLES 
==================================================================================================== */

/* Card
------------------------------------------------------------------------------------------ */
.is-style-kgt-card,
:is(.wp-block-group.is-style-kgt-card) {
    padding: 1.5rem;
    border-radius: var(--wp--custom--border-radius--regular);
    overflow: hidden;
}


/* Heading with Icon
------------------------------------------------------------------------------------------ */
.kgt-heading-with-icon,
.wp-block-group:has(> .wp-block-icon + .wp-block-heading) {
    --icon-height: 96px;

    position: relative;
    z-index: 1;
    padding-top: calc(var(--icon-height) / 2);
}
.kgt-heading-with-icon > .wp-block-icon,
.wp-block-group:has(> .wp-block-icon + .wp-block-heading) > .wp-block-icon {
    position: absolute;
    top: calc(var(--icon-height) / 2);
    left: calc((var(--icon-height) / 2) * -1);
    z-index: -1;
    transform: translateY(-55%);

    svg {
        width: auto;
        height: var(--icon-height);
    }
}
.kgt-heading-with-icon  > .wp-block-heading,
.wp-block-group:has(> .wp-block-icon + .wp-block-heading) > .wp-block-heading {
    margin-block-start: 0;
    margin-block-end: 1rem;
}


/* KGT Hero
------------------------------------------------------------------------------------------ */
.kgt-hero > .wp-block-group {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--wp--custom--spacing--gap-large);
    position: relative;
    z-index: 1;
}
.kgt-hero__welcome {
    padding-top: var(--wp--custom--spacing--section);
    padding-bottom: 0;
}
.kgt-hero__infos {
    width: 100%;
    padding-top: 0;
}

@media (min-width: 782px) {
    .kgt-hero > .wp-block-group {
        grid-template-columns: minmax(30%, 1fr) 1fr;
    }
    .kgt-hero__welcome,
    .kgt-hero__infos {
        padding-top: var(--wp--custom--spacing--section);
        padding-bottom: var(--wp--custom--spacing--section);
    }
    .kgt-hero__infos {
        width: 100%;
        justify-items: self-end;
        margin-top: 0 !important;
        padding-bottom: clamp(8em, 4vw, 18em);

        background-image: url('../images/cape10-kgt-hero-illustration.svg');
        background-repeat: no-repeat;
        background-position: right bottom;
        background-size: contain;

        p {
            text-align: right;
        }
    }
    .kgt-hero__illustration {
        display: none;
    }
    .kgt-hero__infos .wp-block-telex-countdown-timer .countdown-timer {
        justify-content: end;
    }
}



/* SITE HEADER & NAVIGATION
==================================================================================================== */

/* Navigation
------------------------------------------------------------------------------------------ */
.site-header .wp-block-navigation__container {
    column-gap: 1rem;
    row-gap: 0.5rem;
}
.site-header .wp-block-navigation-item__label {
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
    transition: color 0.2s ease-in-out;
}
.site-header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
    padding: 0.25em clamp(0.15em, 2vw, 0.75em);
    border-radius: var(--wp--custom--border-radius--small);
    transition: background-color 0.2s ease-in-out;
}
.site-header .wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
    background-color: var(--wp--preset--color--heading);

    .wp-block-navigation-item__label {
        color: var(--wp--preset--color--white);
    }
}

/* Navigation Submenu open
------------------------------------------------------------------------------------------ */
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
    display: grid;
    padding: 1.5rem;
}
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-dialog {
    display: grid;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin: 0;
}
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content {
    align-items: center;
    padding: 0;
}
.wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
    align-items: center;
}
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation-item__label {
    font-size: var(--wp--preset--font-size--large);
}



/* SITE FOOTER
==================================================================================================== */
   
footer.site-footer {
    overflow: clip;
}
footer.site-footer .cape10-section {
    position: relative;
    z-index: 1;
    padding-top: 2em;
    margin-top: 2em;
}
footer.site-footer .cape10-section::after {
    content: "";
    width: 200vw;
    height: calc(100% + var(--wp--custom--spacing--section));
    background: inherit;
    display: block;
    position: absolute;
    top: 0;
    left: calc(-1 * var(--wp--style--root--padding-left));
    z-index: -1;
}
footer.site-footer .wp-block-group.is-layout-flex:has(.wp-block-wxblock-copyright) {
    row-gap: 0.5em;
}
footer.site-footer .wp-block-navigation-item:where(:hover, .current-menu-item) a {
    text-decoration: underline;
}

@media (min-width: 782px) {
    footer.site-footer .cape10-section {
        padding-left: clamp(24px, 3vw, 40px);
        padding-top: 0;
        margin-top: 0;
    }
    footer.site-footer .cape10-section::after {
        height: calc(100% + calc(2 * var(--wp--custom--spacing--section)));
        top: calc(-1 * var(--wp--custom--spacing--section));
        left: 0;
    }
}