/* Audace — Front styles */

/* ---------- Scrollbar: 20px light-gray thumb, transparent track ---------- */
/* Firefox (93+) */
html {
    scrollbar-color: lightgray transparent;
    scrollbar-width: auto;
}

/* Chrome, Edge, Safari, Opera — WebKit/Blink */
::-webkit-scrollbar {
    width: 20px;
    height: 20px;
}

.page-close {
    position: absolute;
    bottom: 2.25rem;
}

.page-close a:hover {
    filter:invert(0.9);
}

@media (max-width: 781px) {
    .page-close {
        position: absolute;
        top: 1.75rem;
        right:2.25rem;
        max-height:80px!important;
    }
}

.fade-in {
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 2s;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: lightgray;
    background-clip: padding-box;
    /* prevents bg bleeding under border */
    border: 0;
    border-radius: 0;
    min-height: 40px;
    /* prevents thumb collapsing on long pages */
    min-width: 40px;
    /* same for horizontal */
}

::-webkit-scrollbar-thumb:hover {
    background: #aaa;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:active {
    background: #999;
    /* feedback while dragging */
    background-clip: padding-box;
}

/* Prevent track background showing through on macOS overlay scrollbars */
::-webkit-scrollbar-track-piece {
    background: transparent;
}

/* Available viewport height = 100dvh - admin bar - site header.
 * `dvh` (dynamic viewport height) tracks the currently-visible viewport,
 * collapsing/expanding as the mobile address bar shows and hides. */
:root {
    --audace-viewport-h: calc(100lvh - var(--wp-admin--admin-bar--height, 0px) - var(--audace-header-h, 0px));
}

/* Fallback for browsers without dvh support (pre-Safari 15.4 / older Chrome). */
@supports not (height: 100dvh) {
    :root {
        --audace-viewport-h: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - var(--audace-header-h, 0px));
    }
}

.wp-block-image a {
    display: block;
}


/********* VERTICAL SLIDES ***********/
.is-style-slides-container .wp-block-columns,
.is-style-slides-container>.wp-block-cover.is-style-slide,
.is-style-slide .wp-block-column figure {
    max-height: calc(var(--audace-viewport-h));
    /* lets it grow beyond viewport if needed */
}

.is-style-slide .wp-block-column figure * {
    max-height: inherit;
    /* lets it grow beyond viewport if needed */
}

/* Cover / group acting as a slide: fill the viewport like columns slides do. */
.is-style-slides-container>.wp-block-cover.is-style-slide,
.is-style-slides-container>.wp-block-group.is-style-slide {
    min-height: var(--audace-viewport-h);
    height: var(--audace-viewport-h);
    width: 100%;
}

/* Expertise showcase acting as a slide. */
.is-style-slides-container>.wp-block-audace-expertise-showcase.is-style-slide,
.wp-block-audace-expertise-showcase.is-style-slide {
    min-height: var(--audace-viewport-h);
    height: var(--audace-viewport-h);
    width: 100%;
}

.has-audace-full-height .wp-block-cover {
    height: var(--audace-viewport-h);
}

.wp-block-column.is-style-full-height-image {
    height: var(--audace-viewport-h);
}

.wp-block-column.is-style-full-height-image figure,
.wp-block-column.is-style-full-height-image figure img {
    height: 100%;
    width: auto;
}

.is-style-slide .wp-block-column.is-style-mobile-50vh figure {
    display: flex;
    max-height: 100%;
}

.wp-block-column.is-style-mobile-50vh figure.aligncenter {
    justify-content: center;
}

.is-style-slide .wp-block-column.is-style-mobile-50vh figure img {
    max-height: 100%;
    width: auto;
}

@media (min-width: 782px) {
    .is-style-slide .wp-block-column {
        max-height: var(--audace-viewport-h);
        overflow-y: auto;
    }

    .is-style-slide.wp-block-cover .wp-block-cover__inner-container {
        max-height: 100%;
        overflow-y: auto;
    }
}

.is-style-slide,
.is-style-slide * {
    max-height: var(--audace-viewport-h);

    /* Hide scrollbar for Chrome, Safari and Opera */
    -webkit-scrollbar-width: none;

    /* Hide scrollbar for Firefox */
    scrollbar-width: none;

    /* Hide scrollbar for IE, Edge and old Chrome/Safari */
    -ms-overflow-style: none;
}


@media (max-width: 781px) {

    .is-style-slide .wp-block-column {
        max-height: none;
    }

    .is-style-slide.wp-block-cover .wp-block-cover__inner-container {
        max-height: none;
    }

    .is-style-slide::-webkit-scrollbar {
        display: none;
    }

    .is-style-slide .is-layout-flow.is-vertically-aligned-center {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .wp-block-column.is-style-mobile-50vh,
    .has-audace-full-height .wp-block-column.is-style-mobile-50vh .wp-block-cover,
    .has-audace-full-height .wp-block-column.is-style-mobile-50vh .wp-block-cover img,
    .has-audace-full-height .wp-block-column.is-style-mobile-50vh .wp-block-cover .wp-block-cover__background {
        height: calc(50lvh - var(--audace-header-h));
        min-height: calc(50lvh - var(--audace-header-h));
    }

    .is-style-slide .wp-block-column.is-style-mobile-50vh figure {
        display: flex;
        height: 100%!important;
    }

    .is-style-slide .wp-block-column.is-style-mobile-50vh figure img {
        height: 100% !important;
        width: auto !important;
    }

    footer, footer > *, footer p {
        text-align: center!important;
        gap:3em!important;
    }


}

/* Covers */
.wp-block-cover,
.wp-block-cover-image {
    padding: 0;
}

/* Clean no margin */
:where(.wp-site-blocks)>*,
:root :where(.is-layout-constrained)>* {
    margin-block-start: 0;
    margin-block-end: 0;
}

/* ---------- Columns: lock width regardless of inner content/padding ---------- */
.wp-block-columns>.wp-block-column {
    box-sizing: border-box;
}

@media (min-width: 782px) {
    /* The inline `width: calc(50% - gap)` on each column is the correct
     * size — but the default `flex: 1 1 0%` from Gutenberg overrides it
     * (flex-basis 0 + grow lets the wider-content column take more room).
     * Lock the column to its own declared width with `flex: 0 0 auto`. */
    .wp-block-columns>.wp-block-column[style*="width"] {
        flex: 0 0 auto;
        overflow-wrap: break-word;
    }
}

/* ---------- Hide-title: also hide a container that only wraps the title ---------- */
.audace-title-hidden :is(.wp-block-group, .wp-block-cover, header, section):has(> .audace-hidden-title:only-child) {
    display: none;
}

/* ---------- Full-height (core/columns, core/cover) ---------- */
.has-audace-full-height {
    min-height: var(--audace-viewport-h);
}

/* Admin bar height as CSS var (front side).
 * WP defaults: 32px desktop, 46px between 601-782px, hidden ≤ 600px. */
body.admin-bar {
    --wp-admin--admin-bar--height: 32px;
}

@media (max-width: 781px) {
    body.admin-bar {
        --wp-admin--admin-bar--height: 46px;
    }
}

@media (max-width: 600px) {
    body.admin-bar {
        --wp-admin--admin-bar--height: 0px;
    }
}

/* ---------- Custom CTA style on navigation links ---------- */
.wp-block-navigation-item.is-style-audace-button>.wp-block-navigation-item__content {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base);
    padding: 0.6rem 1.2rem;
    border-radius: 0;
    font-weight: 600;
    text-decoration: none;
}

.wp-block-navigation-item.is-style-audace-button>.wp-block-navigation-item__content:hover {
    background: var(--wp--preset--color--contrast);
}

/* ---------- Custom nav icon ---------- */
.wp-block-navigation__responsive-container-open .audace-nav-icon {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
}

/* ---------- Menu overlay ---------- */
.audace-menu-overlay[hidden] {
    display: none !important;
}

.audace-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--wp--preset--color--base);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Fade in using the same keyframes as the site logo (fadeInOpacity). */
.audace-menu-overlay:not([hidden]) {
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: .5s;
}

.audace-menu-overlay__inner {
    height: 100lvh;
    width: 100vw;
    position: fixed;
    top: 0;
}

/* Sizing for the outermost overlay group. */
.audace-menu-overlay .audace-overlay-content {
    height: 100lvh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    margin-top: calc(var(--wp-admin--admin-bar--height, 0px));
}

.audace-menu-overlay .audace-overlay-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.audace-menu-overlay a {
    text-decoration: none;
}

/* WP's block-layout CSS is not inlined for template parts rendered via
 * wp_body_open, so the layout classes need explicit rules here. */
.audace-menu-overlay .is-layout-flex {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--style--block-gap, 0.5em);
    align-items: center;
}

.audace-menu-overlay .is-layout-flex.is-vertical {
    flex-direction: column;
    flex-wrap: nowrap;
}

.audace-menu-overlay .is-layout-flex.is-content-justification-center {
    justify-content: center;
}

.audace-menu-overlay .is-layout-flex>* {
    margin: 0;
}

.audace-menu-overlay__close {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 10000;
    width: 3rem;
    height: 3rem;
    font-size: 2rem;
    line-height: 1;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.audace-menu-overlay__close:hover::before {
    filter: invert(0);
}

.audace-menu-overlay__close::before {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    filter: invert(1);
}

/* When open, hide the native Navigation overlay panel so only ours shows. */
html.audace-overlay-open .wp-block-navigation__responsive-container.is-menu-open {
    display: none !important;
}

/* Push overlay below admin bar when logged in. */
body.admin-bar .audace-menu-overlay {
    top: var(--wp-admin--admin-bar--height, 32px);
}

body.admin-bar .audace-menu-overlay__close {
    top: calc(var(--wp-admin--admin-bar--height, 32px) + 1rem);
    right: 2.25rem;
}

.audace-site-footer a {
    text-decoration: none;
}

.audace-site-footer a:hover,
.audace-site-footer a:focus-visible {
    color: var(--wp--preset--color--contrast, #000);
}

/* Footer images (white SVG/PNG icons) invert to black on hover. */
.audace-site-footer a img {
    transition: filter 0.2s ease;
}
.audace-site-footer a:hover img,
.audace-site-footer a:focus-visible img {
    filter: invert(1);
}


/* Mobile: disable the pinned-slides system. Each slide renders in natural
 * flow, stacking vertically inside the .audace-app wrapper. */
@media (max-width: 781px) {

    .is-style-slides-container>.wp-block-cover.is-style-slide,
    .is-style-slides-container>.wp-block-group.is-style-slide,
    .is-style-slides-container>.wp-block-columns.is-style-slide,
    .is-style-slides-container>.wp-block-audace-expertise-showcase.is-style-slide,
    .wp-block-audace-expertise-showcase.is-style-slide,
    .wp-block-audace-productions-showcase.is-style-slide {
        height: auto;
        min-height: var(--audace-viewport-h);
    }
}

/* ===== Sticky slides (snap handled by JS: assets/js/scroll-snap.js) ====== */

@media (min-width: 782px) {
    .is-style-slide {
        position: -webkit-sticky;
        position: sticky;
        top: calc(var(--audace-header-h) + var(--wp-admin--admin-bar--height, 0px));
    }
}

@media (max-width: 781px) {
    .is-style-slide {
        position: relative;
        top:inherit;
        max-height:none!important;
    }
}


/* Columns: left sticky, right scrolls.
 * `align-self: flex-start` keeps the sticky item at its natural height so
 * it doesn't stretch to the row and defeat sticky behavior. */
@media (min-width: 782px) {
    .wp-block-columns.is-style-sticky-left > .wp-block-column:first-child {
        position: -webkit-sticky;
        position: sticky;
        top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--audace-header-h, 0px));
        align-self: flex-start;
        max-height: var(--audace-viewport-h);
        overflow-y: auto;
    }
}