/**
 * Nappheme 2
 * Structural layout.
 *
 * Base structural and visual styles for the parent theme.
 * Project-specific styling should normally live in the child theme.
 */


/* ==========================================================================
   THEME BASE
   ========================================================================== */

:root {
    --nap-layout-max-width: 1200px;
    --nap-layout-gutter: 24px;

    --nap-header-height: 90px;
    --nap-header-height-switched: 70px;
    --nap-header-padding-x: 24px;

    --nap-logo-width: 180px;
    --nap-logo-width-switched: 140px;

    --nap-header-background: #ffffff;
    --nap-header-color: #171717;

    --nap-menu-gap: 28px;
    --nap-menu-font-size: 15px;
    --nap-menu-font-weight: 600;
    --nap-menu-hover-color: #d63638;

    --nap-submenu-width: 220px;
    --nap-submenu-background: #ffffff;
    --nap-submenu-hover-background: #f5f5f5;

    --nap-sidebar-width: 320px;
    --nap-sidebar-gap: 40px;

    --nap-transition-fast: 180ms;
}


/* ==========================================================================
   SITE
   ========================================================================== */

.nap-site {
    position: relative;
    z-index: 1;

    width: 100%;
}


/* ==========================================================================
   TOP LAYOUT
   ========================================================================== */

.nap-top-layout {
    position: relative;

    width: 100%;
}


/* ==========================================================================
   SITE HEADER
   ========================================================================== */



.nap-site-header__inner,
.nap-site-header__bar,
.nap-site-header__navigation,
.nap-navigation,
.nap-navigation__inner,
.nap-navigation__desktop {
    box-sizing: border-box;
}
.nap-site-header {
    position: relative;
    z-index: 990;

    width: 100%;

    background: var(--nap-header-background);
    color: var(--nap-header-color);
}


.nap-site-header__inner {
    position: relative;

    width: 100%;
    margin-right: auto;
    margin-left: auto;
}


/*
 * Fixed width.
 */
.nap-site-header--width-fixed
.nap-site-header__inner {
    width: calc(
            100% - (var(--nap-layout-gutter) * 2)
    );

    max-width: var(--nap-layout-max-width);
}


/*
 * Full width.
 */
.nap-site-header--width-full
.nap-site-header__inner {
    width: 100%;
    max-width: none;
}


/* ==========================================================================
   TOP WIDGET
   ========================================================================== */

.nap-site-header__top-widget {
    position: relative;
    z-index: 2;

    width: 100%;
}


.nap-site-header__top-widget-inner {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}


.nap-site-header--width-fixed
.nap-site-header__top-widget-inner {
    width: calc(
        100% - (var(--nap-layout-gutter) * 2)
    );

    max-width: var(--nap-layout-max-width);
}


.nap-site-header__top-widget .nap-widget,
.nap-site-header__top-widget .widget_block {
    margin: 0;
}


/* ==========================================================================
   SITE HEADER - FIXED
   ========================================================================== */

.nap-site-header--behavior-fixed {
    position: fixed;
    z-index: 990;

    top: 0;
    right: 0;
    left: 0;

    width: 100%;
}


/*
 * Automatic placeholder created by main.js.
 *
 * Keeps the normal document flow when the Site Header is fixed.
 */
.nap-site-header-spacer {
    display: block;

    width: 100%;
    height: 0;

    margin: 0;
    padding: 0;

    visibility: hidden;
    pointer-events: none;
}


/*
 * WordPress Admin Bar.
 */
body.admin-bar
.nap-site-header--behavior-fixed {
    top: 32px;
}


@media screen and (max-width: 782px) {

    body.admin-bar
    .nap-site-header--behavior-fixed {
        top: 46px;
    }

}


/* ==========================================================================
   SITE HEADER BRANDING
   ========================================================================== */

/*
 * The visual bar has an explicit height.
 * The Top Widget stays outside this height and can grow freely.
 */
.nap-site-header__bar {
    position: relative;

    width: 100%;
    height: var(--nap-header-height);

    transition:
        height var(--nap-transition-fast) ease;
}


/*
 * Branding is always independent from document flow.
 * Standard layout: top-left.
 */
.nap-site-header__branding {
    position: absolute;
    z-index: 100;

    top: 50%;
    left: var(--nap-header-padding-x);

    display: flex;
    align-items: center;

    max-width: var(--nap-logo-width);
    max-height: calc(var(--nap-header-height) - 20px);

    transform: translateY(-50%);

    transition:
        max-width var(--nap-transition-fast) ease,
        max-height var(--nap-transition-fast) ease;
}


.nap-site-header__branding .custom-logo-link {
    display: block;

    max-width: 100%;
    max-height: 100%;

    line-height: 0;
}


.nap-site-header__branding .custom-logo {
    display: block;

    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(var(--nap-header-height) - 20px);

    object-fit: contain;
}


/*
 * Split layout: Branding is centered independently from both menus.
 */
.nap-site-header--navigation-split
.nap-site-header__branding {
    left: 50%;

    transform: translate(-50%, -50%);
}


/*
 * Scroll switch.
 */
.nap-site-header.is-switched {
    --nap-header-height: var(--nap-header-height-switched);
}


.nap-site-header.is-switched
.nap-site-header__branding {
    max-width: var(--nap-logo-width-switched);
}


/* ==========================================================================
   SITE HEADER NAVIGATION SLOT
   ========================================================================== */

.nap-site-header__navigation {
    position: relative;

    box-sizing: border-box;

    width: 100%;
    height: 100%;
    min-width: 0;
}


/*
 * Standard layout reserves the logo area on the left.
 */
.nap-site-header--navigation-standard
.nap-site-header__navigation {
    padding-left: calc(
        var(--nap-logo-width) +
        (var(--nap-header-padding-x) * 2)
    );
}


.nap-site-header--navigation-standard.is-switched
.nap-site-header__navigation {
    padding-left: calc(
        var(--nap-logo-width-switched) +
        (var(--nap-header-padding-x) * 2)
    );
}


.nap-site-header__navigation
.nap-navigation {
    width: 100%;
    height: 100%;
}


.nap-site-header__navigation
.nap-navigation__desktop {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */

.nap-navigation {
    position: relative;
    z-index: 90;

    box-sizing: border-box;

    width: 100%;
    height: 100%;
}


.nap-navigation__inner {
    box-sizing: border-box;

    width: 100%;
    height: 100%;

    margin-right: auto;
    margin-left: auto;
}




/* ==========================================================================
   STANDARD MENU
   ========================================================================== */

.nap-menu {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;

    gap: clamp(12px, 2vw, var(--nap-menu-gap));

    margin: 0;
    padding: 0;

    list-style: none;
}


.nap-menu li {
    margin: 0;
    padding: 0;
}


.nap-menu a {
    display: block;
}


/* ==========================================================================
   DESKTOP NAVIGATION
   ========================================================================== */

.nap-navigation__desktop {
    position: relative;

    display: flex;
    align-items: center;

    box-sizing: border-box;

    width: 100%;
    height: 100%;
    max-width: 100%;

    padding-right: var(--nap-header-padding-x);
    padding-left: var(--nap-header-padding-x);
}


.nap-navigation__desktop .nap-menu {
    position: relative;

    display: flex;
    flex-wrap: nowrap;
    align-items: center;

    gap: clamp(12px, 2vw, var(--nap-menu-gap));

    margin: 0;
    padding: 0;

    list-style: none;
}


.nap-navigation__desktop .nap-menu > li {
    position: relative;

    margin: 0;
    padding: 0;
}


.nap-navigation__desktop .nap-menu > li > a {
    display: flex;
    align-items: center;

    min-height: var(--nap-header-height);

    padding: 0;

    color: var(--nap-header-color);

    font-size: var(--nap-menu-font-size);
    font-weight: var(--nap-menu-font-weight);
    line-height: 1.2;

    text-decoration: none;
    white-space: nowrap;

    transition:
            min-height var(--nap-transition-fast) ease,
            color var(--nap-transition-fast) ease;
}


.nap-navigation__desktop .nap-menu > li > a:hover,
.nap-navigation__desktop .nap-menu > li > a:focus-visible,
.nap-navigation__desktop .nap-menu > li.current-menu-item > a,
.nap-navigation__desktop .nap-menu > li.current-menu-ancestor > a {
    color: var(--nap-menu-hover-color);
}




/* ==========================================================================
   MENU COLOR VARIANTS
   ========================================================================== */

/*
 * Add one of these classes to a WordPress menu item:
 *
 * nap-menu-primary
 * nap-menu-secondary
 * nap-menu-accent
 * nap-menu-light
 * nap-menu-dark
 *
 * The colors come from theme.json, so a Child Theme can redefine
 * the palette without touching this file.
 */

.nap-menu-primary {
    --nap-menu-item-color:
            var(--wp--preset--color--primary);
    --nap-menu-item-hover-color:
            var(--wp--preset--color--primary);
}


.nap-menu-secondary {
    --nap-menu-item-color:
            var(--wp--preset--color--secondary);
    --nap-menu-item-hover-color:
            var(--wp--preset--color--secondary);
}


.nap-menu-accent {
    --nap-menu-item-color:
            var(--wp--preset--color--accent);
    --nap-menu-item-hover-color:
            var(--wp--preset--color--accent);
}


.nap-menu-light {
    --nap-menu-item-color:
            var(--wp--preset--color--light);
    --nap-menu-item-hover-color:
            var(--wp--preset--color--light);
}


.nap-menu-dark {
    --nap-menu-item-color:
            var(--wp--preset--color--foreground);
    --nap-menu-item-hover-color:
            var(--wp--preset--color--foreground);
}


/*
 * Individual top-level item color.
 */
.nap-navigation__desktop
.nap-menu
> li
> a {
    color:
            var(
                    --nap-menu-item-color,
                    var(--nap-header-color)
            );
}


.nap-navigation__desktop
.nap-menu
> li
> a:hover,
.nap-navigation__desktop
.nap-menu
> li
> a:focus-visible,
.nap-navigation__desktop
.nap-menu
> li.current-menu-item
> a,
.nap-navigation__desktop
.nap-menu
> li.current-menu-ancestor
> a {
    color:
            var(
                    --nap-menu-item-hover-color,
                    var(--nap-menu-hover-color)
            );
}


/*
 * Mobile menu inherits the same item variants.
 */
.nap-menu--mobile
> li
> a {
    color:
            var(
                    --nap-menu-item-color,
                    inherit
            );
}


/* ==========================================================================
   DESKTOP SUBMENUS
   ========================================================================== */

/*
 * Parent item.
 */
.nap-navigation__desktop
.menu-item-has-children {
    position: relative;
}


/*
 * Base submenu.
 */
.nap-navigation__desktop
.sub-menu {
    position: absolute;
    z-index: 1000;

    top: 100%;
    left: 0;

    width: var(--nap-submenu-width);
    min-width: var(--nap-submenu-width);

    margin: 0;
    padding: 8px 0;

    background: var(--nap-submenu-background);

    list-style: none;

    box-shadow:
            0 12px 30px rgba(0, 0, 0, 0.12);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(8px);

    transition:
            opacity var(--nap-transition-fast) ease,
            transform var(--nap-transition-fast) ease,
            visibility var(--nap-transition-fast) ease;
}


.nap-navigation__desktop
.sub-menu li {
    position: relative;

    width: 100%;

    margin: 0;
    padding: 0;
}


.nap-navigation__desktop
.sub-menu a {
    display: block;

    width: 100%;

    padding: 10px 18px;

    color: var(--nap-header-color);

    font-size: 14px;
    line-height: 1.4;

    text-decoration: none;
    white-space: nowrap;

    transition:
            color var(--nap-transition-fast) ease,
            background var(--nap-transition-fast) ease;
}


.nap-navigation__desktop
.sub-menu a:hover,
.nap-navigation__desktop
.sub-menu a:focus-visible {
    color: var(--nap-menu-hover-color);

    background: var(--nap-submenu-hover-background);
}


/*
 * Open state.
 *
 * :hover        -> mouse
 * :focus-within -> keyboard
 * .is-open      -> JS
 */
.nap-navigation__desktop
.menu-item-has-children:hover
> .sub-menu,
.nap-navigation__desktop
.menu-item-has-children:focus-within
> .sub-menu,
.nap-navigation__desktop
.menu-item-has-children.is-open
> .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
}


/*
 * First-level submenu near the right edge.
 * JS adds .opens-left to its parent item.
 */
.nap-navigation__desktop
.nap-menu
> .menu-item-has-children.opens-left
> .sub-menu {
    right: 0;
    left: auto;
}


/*
 * Nested submenu.
 */
.nap-navigation__desktop
.sub-menu
.menu-item-has-children
> .sub-menu {
    top: 0;
    left: 100%;

    transform: translateX(8px);
}


.nap-navigation__desktop
.sub-menu
.menu-item-has-children:hover
> .sub-menu,
.nap-navigation__desktop
.sub-menu
.menu-item-has-children:focus-within
> .sub-menu,
.nap-navigation__desktop
.sub-menu
.menu-item-has-children.is-open
> .sub-menu {
    transform: translateX(0);
}


/*
 * Nested submenu viewport correction.
 */
.nap-navigation__desktop
.sub-menu
.menu-item-has-children.opens-left
> .sub-menu {
    right: 100%;
    left: auto;

    transform: translateX(-8px);
}


.nap-navigation__desktop
.sub-menu
.menu-item-has-children.opens-left:hover
> .sub-menu,
.nap-navigation__desktop
.sub-menu
.menu-item-has-children.opens-left:focus-within
> .sub-menu,
.nap-navigation__desktop
.sub-menu
.menu-item-has-children.opens-left.is-open
> .sub-menu {
    transform: translateX(0);
}


/* ==========================================================================
   SPLIT NAVIGATION
   ========================================================================== */

/*
 * Two independent menu columns.
 * The central logo is owned by Site Header and is absolute,
 * so the grid only needs to reserve a visual gap for it.
 */
.nap-navigation-split {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    align-items: center;

    column-gap: calc(
        var(--nap-logo-width) +
        (var(--nap-header-padding-x) * 2)
    );

    width: 100%;
}


.nap-site-header.is-switched
.nap-navigation-split {
    column-gap: calc(
        var(--nap-logo-width-switched) +
        (var(--nap-header-padding-x) * 2)
    );
}


.nap-navigation-split__left,
.nap-navigation-split__right {
    min-width: 0;
}


.nap-navigation-split__left
.nap-menu {
    justify-content: flex-end;
}


.nap-navigation-split__right
.nap-menu {
    justify-content: flex-start;
}


/* ==========================================================================
   MOBILE NAVIGATION
   ========================================================================== */

/*
 * The mobile navigation component is structurally outside
 * .nap-navigation and lives directly inside Site Header.
 */
.nap-site-header__mobile-navigation {
    display: none;
}


.nap-mobile-navigation {
    position: static;
}


/*
 * Hamburger.
 *
 * Positioned against .nap-site-header__inner,
 * which is already position: relative.
 *
 * To move it to the left later:
 *     right: auto;
 *     left: 10px;
 */
.nap-mobile-navigation__toggle {
    position: absolute;
    z-index: 1001;

    top: 10px;
    right: 10px;
    left: auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 0;

    padding: 0.75rem;

    background: transparent;
    color: var(--nap-header-color);

    font: inherit;
    font-size: 1.5rem;
    line-height: 1;

    cursor: pointer;
}


/*
 * Dark overlay behind panel.
 */
.nap-mobile-navigation__overlay {
    position: fixed;
    z-index: 998;

    inset: 0;

    background: rgba(0, 0, 0, 0.5);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
            opacity 0.25s ease,
            visibility 0s linear 0.25s;
}


/*
 * Off-canvas panel.
 */
.nap-mobile-navigation__panel {
    position: fixed;
    z-index: 999;

    top: 0;
    right: 0;

    width: min(90vw, 360px);
    height: 100dvh;
    min-height: 100vh;

    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;

    background: #ffffff;
    color: #171717;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translate3d(102%, 0, 0);

    transition:
            transform 0.3s ease,
            opacity 0.2s ease,
            visibility 0s linear 0.3s;
}


/*
 * Open state.
 */
.nap-mobile-navigation.is-open
.nap-mobile-navigation__overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transition-delay: 0s;
}


.nap-mobile-navigation.is-open
.nap-mobile-navigation__panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translate3d(0, 0, 0);

    transition-delay: 0s;
}


/*
 * Panel header.
 */
.nap-mobile-navigation__header {
    display: flex;
    justify-content: flex-end;

    padding: 1rem;
}


/*
 * Close button.
 */
.nap-mobile-navigation__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 0;

    padding: 0.5rem;

    background: transparent;
    color: inherit;

    font: inherit;
    font-size: 2rem;
    line-height: 1;

    cursor: pointer;
}


/*
 * Mobile menu.
 */
.nap-menu--mobile {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: 0;

    width: 100%;

    margin: 0;
    padding: 0;

    list-style: none;
}


.nap-menu--mobile li {
    width: 100%;

    margin: 0;
    padding: 0;
}


.nap-menu--mobile a {
    display: block;

    width: 100%;

    padding: 0.8rem 1.25rem;

    color: inherit;

    text-decoration: none;
}


/* ==========================================================================
   MOBILE SUBMENUS
   ========================================================================== */

.nap-menu--mobile
.menu-item-has-children {
    position: relative;
}


.nap-menu--mobile
.menu-item-has-children
> a {
    padding-right: 4rem;
}


.nap-mobile-submenu-toggle {
    position: absolute;

    top: 0;
    right: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 3.5rem;
    height: 3.5rem;

    border: 0;

    padding: 0;

    background: transparent;
    color: inherit;

    font: inherit;

    cursor: pointer;
}


.nap-mobile-submenu-toggle__icon {
    position: relative;

    display: block;

    width: 14px;
    height: 14px;
}


.nap-mobile-submenu-toggle__icon::before,
.nap-mobile-submenu-toggle__icon::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 14px;
    height: 2px;

    background: currentColor;

    transform:
            translate(-50%, -50%);

    transition:
            transform 0.2s ease,
            opacity 0.2s ease;
}


.nap-mobile-submenu-toggle__icon::after {
    transform:
            translate(-50%, -50%)
            rotate(90deg);
}


.menu-item-has-children.is-submenu-open
> .nap-mobile-submenu-toggle
.nap-mobile-submenu-toggle__icon::after {
    opacity: 0;

    transform:
            translate(-50%, -50%)
            rotate(0);
}


.nap-menu--mobile
.sub-menu {
    display: none;

    margin: 0;
    padding: 0;

    list-style: none;
}


.nap-menu--mobile
.menu-item-has-children.is-submenu-open
> .sub-menu {
    display: block;
}


.nap-menu--mobile
.sub-menu
a {
    padding-left: 2rem;
}


.nap-menu--mobile
.sub-menu
.sub-menu
a {
    padding-left: 3rem;
}


body.nap-mobile-menu-open {
    overflow: hidden;
}


/* ==========================================================================
   MOBILE / AUTO-COLLAPSED NAVIGATION
   ========================================================================== */

@media screen and (max-width: 959px) {

    .nap-site-header--width-fixed
    .nap-site-header__inner {
        width: 100%;
        max-width: none;
    }


    .nap-site-header__navigation {
        display: none;
    }


    .nap-site-header__mobile-navigation {
        display: block;
    }


    /*
     * On small screens the logo remains absolute,
     * while the hamburger owns the top-right corner.
     */
    .nap-site-header__branding,
    .nap-site-header--navigation-split
    .nap-site-header__branding {
        left: var(--nap-header-padding-x);

        max-width: min(
            var(--nap-logo-width),
            calc(100% - 90px)
        );

        transform: translateY(-50%);
    }

}


/*
 * Desktop menu can also collapse before 959px when its real content
 * no longer fits in the available Header space.
 * navigation.js toggles this class.
 */
.nap-site-header.is-navigation-collapsed
.nap-site-header__navigation {
    display: none;
}


.nap-site-header.is-navigation-collapsed
.nap-site-header__mobile-navigation {
    display: block;
}


.nap-site-header.is-navigation-collapsed
.nap-site-header__branding {
    left: var(--nap-header-padding-x);

    max-width: min(
        var(--nap-logo-width),
        calc(100% - 90px)
    );

    transform: translateY(-50%);
}

/*
 * Avoid horizontal scrollbar caused by an off-canvas repaint.
 */
html,
body {
    overflow-x: clip;
}


@supports not (overflow: clip) {

    html,
    body {
        overflow-x: hidden;
    }

}


/* ==========================================================================
   FULLSCREEN
   ========================================================================== */

/*
 * STABLE VERSION.
 *
 * Do not turn this into a flex container unless the Fullscreen
 * architecture is intentionally revised.
 */
.nap-fullscreen {
    position: relative;

    width: 100%;

    min-height: var(
            --nap-fullscreen-height,
            100vh
    );
}


.nap-fullscreen__body {
    position: relative;

    width: 100%;

    min-height: inherit;
}


.nap-fullscreen__content {
    position: relative;

    width: 100%;
    height: 100%;

    min-height: inherit;
}


/*
 * Transparent mode.
 *
 * No background here: the Backdrop underneath remains visible.
 */
.nap-fullscreen__body--transparent {
    background: transparent;
}


/* ==========================================================================
   FULLSCREEN SCROLL INDICATOR
   ========================================================================== */

.nap-fullscreen__scroll {
    position: absolute;
    z-index: 2;

    bottom: 2rem;
    left: 50%;

    transform: translateX(-50%);

    font-size: 2rem;
    line-height: 1;
}


/* ==========================================================================
   PAGE HEAD / TESTATA PAGINA
   ========================================================================== */

.nap-page-head {
    position: relative;
    z-index: 1;

    width: 100%;
    height: var(--nap-page-head-height, 350px);

    overflow: hidden;
}


.nap-page-head__media {
    position: absolute;

    inset: 0;
}


.nap-page-head__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


.nap-page-head__content {
    position: relative;
    z-index: 1;

    width: 100%;
    height: 100%;
}


.nap-page-head__content > :first-child {
    margin-top: 0;
}


.nap-page-head__content > :last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   BACKDROP
   ========================================================================== */

.nap-backdrop {
    position: fixed;
    z-index: 0;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    pointer-events: none;
}


.nap-backdrop__media {
    position: absolute;

    /*
     * Slight oversize avoids visible edges when blur is applied.
     */
    top: -3%;
    right: -3%;
    bottom: -3%;
    left: -3%;

    background-image:
            var(--nap-backdrop-image);

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    opacity:
            var(--nap-backdrop-opacity, 1);

    filter:
            blur(
                    var(--nap-backdrop-blur, 0px)
            );

    /*
     * Useful later for Fade / Ken Burns.
     */
    will-change: transform, opacity;
}


/* ==========================================================================
   MAIN CONTENT
   ========================================================================== */

/*
 * site-main is always full width.
 *
 * It owns the page background, so it fully covers the Backdrop
 * once normal content begins.
 */
.site-main {
    position: relative;
    z-index: 1;

    width: 100%;

    background: #ffffff;
}


/* ==========================================================================
   CONTENT
   ========================================================================== */

.nap-content {
    width: 100%;
}


.nap-content__inner {
    width: 100%;

    margin-right: auto;
    margin-left: auto;
}


/*
 * Fixed content.
 *
 * Background remains full width through .site-main while the inner
 * content follows the global Nappheme width.
 */
.nap-site--fixed
.nap-content__inner {
    width: calc(
            100% - (var(--nap-layout-gutter) * 2)
    );

    max-width: var(--nap-layout-max-width);

    margin-right: auto;
    margin-left: auto;
}


/*
 * Full content.
 */
.nap-site--full
.nap-content__inner {
    width: 100%;
    max-width: none;
}


/* ==========================================================================
   PAGE TEMPLATE: FULL WIDTH
   ========================================================================== */

/*
 * Only the page content ignores the global Fixed width.
 * Header, Page Head, Footer and the rest of the site keep their own settings.
 *
 * Gutenberg also constrains inner blocks through the global content/wide
 * variables generated from theme.json. Override those variables on this page
 * so the editor content can genuinely reach the available full width.
 */
body.nap-template-fullwidth {
    --wp--style--global--content-size: 100%;
    --wp--style--global--wide-size: 100%;
}

body.nap-template-fullwidth
.nap-content__inner {
    width: 100%;
    max-width: none;

    margin-right: 0;
    margin-left: 0;
}


/* ==========================================================================
   PAGE TEMPLATE: SPLASH / BLANK
   ========================================================================== */

/*
 * A completely free visual canvas. The technical WordPress head/footer hooks
 * still run, but no normal Nappheme visual wrapper is emitted.
 *
 * The Gutenberg content/wide variables are also released here, otherwise a
 * constrained Group block could still inherit the normal theme.json width.
 */
body.nap-template-splash {
    --wp--style--global--content-size: 100%;
    --wp--style--global--wide-size: 100%;

    margin: 0;
}


.nap-splash-page,
.nap-splash-page__content {
    box-sizing: border-box;

    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;
}


/* ==========================================================================
   CONTENT LAYOUT
   ========================================================================== */

.nap-content-layout {
    width: 100%;
}


.nap-content-primary {
    grid-area: main;

    min-width: 0;
}


/* ==========================================================================
   SIDEBAR
   ========================================================================== */

.nap-content-layout--with-sidebar {
    display: grid;

    gap: var(--nap-sidebar-gap);

    align-items: start;
}


.nap-content-layout--sidebar-right {
    grid-template-columns:
        minmax(0, 1fr)
        var(--nap-sidebar-width);

    grid-template-areas:
        "main sidebar";
}


.nap-content-layout--sidebar-left {
    grid-template-columns:
        var(--nap-sidebar-width)
        minmax(0, 1fr);

    grid-template-areas:
        "sidebar main";
}


.nap-sidebar {
    grid-area: sidebar;

    min-width: 0;
}


@media screen and (max-width: 959px) {

    .nap-content-layout--with-sidebar {
        display: block;
    }


    .nap-sidebar {
        margin-top: 2rem;
    }

}


/* ==========================================================================
   CENTER WIDGET
   ========================================================================== */

.nap-center-widget {
    position: relative;

    width: 100%;
}


.nap-center-widget__widgets {
    width: 100%;
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

.nap-footer {
    position: relative;
    z-index: 1;

    width: 100%;
}


.nap-footer__widgets {
    width: 100%;
}


/* ==========================================================================
   AFTER SITE
   ========================================================================== */

.nap-after-site {
    position: relative;
    z-index: 1;

    width: 100%;
}


.nap-after-site__widgets {
    width: 100%;
}