/**
 * Layout wrappers printed around the chosen Header / Footer templates.
 *
 * Kept deliberately small: the look of a header belongs to its own Elementor
 * template, these rules only give the wrappers a predictable box and stacking
 * order on a Canvas document, which has no theme header to inherit from.
 */

.am-kit-header,
.am-kit-footer {
    display: block;
    width: 100%;
}

/* Header stays above the page content, e.g. when a hero image slides under it. */
.am-kit-header {
    position: relative;
    z-index: 100;
}

.am-kit-footer {
    position: relative;
    z-index: 1;
}

/*
 * Transparent header.
 *
 * The design puts the page artwork behind the bar: content starts at the very
 * top and the logo sits on top of it, so the header is taken out of the flow
 * with `position: fixed` rather than left in it. Fixed doubles as the sticky
 * behaviour - the bar is already pinned to the viewport, and all that changes
 * on scroll is the surface, through the `is-stuck` class that
 * assets/js/kit-header.js toggles.
 *
 * `position: sticky` is deliberately not used here: the child theme sets
 * `html, body { overflow-x: hidden }` (assets/css/style.css), which turns the
 * body into a scroll container and stops a sticky child of it from ever
 * sticking.
 *
 * Every custom property below is printed on the element from the page's own
 * Body Style settings, so the bar wears the page background rather than a
 * second surface that has to be kept in sync by hand.
 */
.am-kit-header--transparent {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    transition: background-color .3s ease, box-shadow .3s ease;
}

.am-kit-header--transparent.is-stuck {
    background-color: var(--am-kit-header-bg-color, #fff);
    background-image: var(--am-kit-header-bg-image, none);
    background-position: var(--am-kit-header-bg-position, top center);
    background-repeat: var(--am-kit-header-bg-repeat, no-repeat);
    /* Fixed, not copied: the page's own size (often 'contain') leaves gaps in a short bar. */
    background-size: cover;
    box-shadow: 0 1px 10px rgba(0, 0, 0, .08);
}

/*
 * Clear the admin bar. A fixed box is placed against the viewport, so unlike a
 * sticky one it does not inherit the `html { margin-top }` WordPress adds for
 * the bar and has to be pushed down by hand. Below 600px the bar is no longer
 * fixed, so there is nothing left to clear.
 */
body.admin-bar .am-kit-header--transparent {
    top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar .am-kit-header--transparent {
        top: 46px;
    }
}

@media (max-width: 600px) {
    body.admin-bar .am-kit-header--transparent {
        top: 0;
    }
}