/*
 * Vers & Vorm — Canonical site layout system
 * Single source of truth for horizontal alignment.
 * Desktop: centered content, max-width 1280px.
 * All narrower viewports: 15px minimum gutter on each side.
 * Header, navigation and footer backgrounds remain full viewport width;
 * their inner content follows the same 1280px grid.
 */
:root {
    --vv-layout-max: 1280px;
    --vv-layout-gutter: 15px;
    --vv-layout-width: min(var(--vv-layout-max), calc(100% - (var(--vv-layout-gutter) * 2)));
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
}

body {
    overflow-x: clip;
}

/* The page-content shell is the master grid for every WordPress template. */
.site-content {
    width: var(--vv-layout-width) !important;
    max-width: var(--vv-layout-max) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    box-sizing: border-box !important;
}

/* Standard WordPress and theme content wrappers sit on the master grid. */
.site-content :is(
    .site-main,
    .container-studio,
    .single-page-container,
    .builder-wrapper,
    .vv-theme-landing-page,
    .vv-landing-builder-container,
    .vv-home-main,
    .vv-single-post-main,
    .blog-studio-layout,
    .vv-contact-container,
    .vv-checkout-container,
    .vv-masonry-container
) {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
}

/* Nested grid wrappers must not introduce a second, inconsistent outer gutter. */
.site-content :is(
    .container-studio,
    .single-page-container,
    .builder-wrapper,
    .vv-theme-landing-page,
    .vv-landing-builder-container,
    .vv-contact-container,
    .vv-checkout-container
) {
    padding-inline: 0 !important;
}

/* Full-width visual sections remain inside the same page grid. */
.site-content :is(
    .vv-home-hero-wrap,
    .page-hero-section,
    .vv-home-cta-section,
    .vv-home-blog-section,
    .vv-home-ideas-section,
    .vv-single-cta,
    .author-studio-hero,
    .archive-hero-header
) {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
}

/* Header background stays full width; only its inner row is constrained. */
.site-header,
.studio-subnav-bar,
.site-footer {
    width: 100% !important;
    max-width: none !important;
}

.site-header .header-container,
.studio-subnav-bar .container-studio,
.site-footer > .container {
    width: var(--vv-layout-width) !important;
    max-width: var(--vv-layout-max) !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
}

/* Header/footer inner padding is included in their 1280px total width. */
.site-header .header-container {
    padding-inline: 0 !important;
}

.studio-subnav-bar .container-studio,
.site-footer > .container {
    padding-inline: 0 !important;
}

/* Builder shortcode can be nested inside the site grid without double gutters. */
.site-content .builder-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
}

/* Prevent media and long content from forcing the layout wider than the grid. */
.site-content img,
.site-content video,
.site-content iframe,
.site-content table,
.site-content pre,
.site-content .wp-block-embed,
.site-content .wp-block-table {
    max-width: 100%;
}

.site-content :is(.entry-content, .wp-block-post-content, .wp-block-group, .wp-block-cover) {
    min-width: 0;
}

@media (max-width: 767px) {
    :root {
        --vv-layout-gutter: 15px;
    }

    .site-content,
    .site-header .header-container,
    .studio-subnav-bar .container-studio,
    .site-footer > .container {
        width: calc(100% - 30px) !important;
        max-width: calc(100% - 30px) !important;
    }

    .site-content :is(.site-main, .container-studio, .single-page-container, .builder-wrapper) {
        padding-inline: 0 !important;
    }
}


/* Final precedence layer for legacy per-template/mobile overrides. */
html body:not(.wp-admin) .site-content {
    display: flow-root;
    width: min(1280px, calc(100% - 30px)) !important;
    max-width: 1280px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

html body:not(.wp-admin) .site-content > *,
html body:not(.wp-admin) .site-content > .site-main,
html body:not(.wp-admin) .site-content > main.site-main,
html body:not(.wp-admin) .site-content > .container-studio,
html body:not(.wp-admin) .site-content > .single-page-container,
html body:not(.wp-admin) .site-content > .builder-wrapper,
html body:not(.wp-admin) .site-content > .vv-theme-landing-page,
html body:not(.wp-admin) .site-content > .vv-home-hero-wrap,
html body:not(.wp-admin) .site-content > article,
html body:not(.wp-admin) .site-content > section,
html body:not(.wp-admin) .site-content > .alignfull,
html body:not(.wp-admin) .site-content > .wp-block-cover.alignfull {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

html body:not(.wp-admin) .site-content > .vv-home-hero-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

html body:not(.wp-admin) .site-content > .vv-home-hero-wrap > .container-studio {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

@media (max-width: 767px) {
    html body:not(.wp-admin) .site-content {
        width: calc(100% - 30px) !important;
        max-width: calc(100% - 30px) !important;
    }

    html body:not(.wp-admin) .site-content > * {
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* Unified layout, shared by theme and builder plugin. */
:root { --vv-layout-max:1280px; --vv-layout-gutter:15px; --vv-layout-width:min(1280px, calc(100% - 30px)); }
html, body { max-width:100%; }
.site-header, .studio-subnav-bar, .site-footer { width:100% !important; max-width:none !important; }
.site-header .header-container, .studio-subnav-bar > .container-studio,
.site-footer > .container, .site-footer > .container-studio,
.site-footer .footer-container { width:var(--vv-layout-width) !important; max-width:1280px !important; margin-inline:auto !important; padding-inline:0 !important; box-sizing:border-box !important; }
html body .site-content { width:var(--vv-layout-width) !important; max-width:1280px !important; margin-inline:auto !important; padding-inline:0 !important; min-width:0 !important; }
html body .site-content :is(.container-studio,.site-main,.builder-wrapper,.single-page-container,.vv-theme-landing-page,.vv-home-hero-wrap,.vv-theme-home-hero-wrap,.vv-theme-home-hero,.themas-hero-section,.vv-unified-hero) { max-width:100% !important; min-width:0; box-sizing:border-box; }
html body .site-content > :is(.container-studio,.site-main,.builder-wrapper,.single-page-container,.vv-home-hero-wrap,.vv-theme-home-hero-wrap) { width:100% !important; margin-inline:0 !important; padding-inline:0 !important; }
html body .site-content :is(.vv-home-hero-wrap,.vv-theme-home-hero-wrap) > .container-studio { width:100% !important; max-width:100% !important; padding-inline:0 !important; margin-inline:0 !important; }
html body .site-content :is(.site-hero-slanted,.vv-theme-home-hero,.vv-unified-hero) { width:100% !important; max-width:100% !important; border-radius:20px; overflow:hidden; }
html body .site-content .vv-unified-hero { position:relative; min-height:380px; display:flex; flex-direction:column; justify-content:center; align-items:center; background-color:#f0e4db !important; background-image:linear-gradient(90deg,rgba(240,228,219,.9),rgba(240,228,219,.65)),var(--vv-hero-image,none) !important; background-size:cover !important; background-position:center right !important; text-align:center; padding:clamp(30px,5vw,64px) !important; }
html body .site-content :is(img,video,iframe,pre,table) { max-width:100%; }
html body .site-content :is(.blog-studio-layout,.builder-grid,.vv-builder-grid,.wp-block-columns) > * { min-width:0; }
@media(max-width:767px) { html body .site-content :is(.site-hero-slanted,.vv-theme-home-hero,.vv-unified-hero) { height:auto; min-height:300px; } html body .site-content .vv-unified-hero { padding:30px 18px !important; } }