/* Site Layout: Full-width vs. Boxed
 * Toggled via theme_option('site_layout') in admin → Theme Options → General.
 * Body emits data-site-layout="full-width" or "boxed"; CSS reads that attr.
 * CSS custom properties (--site-layout-max-width, --site-layout-bg-color) and
 * any background-image rule are injected inline by header-meta.blade.php so
 * tenant-configurable values can override defaults at request time.
 */

/* Full-width — no visual change vs. existing layout */
body[data-site-layout="full-width"] .site-wrapper {
    width: 100%;
}

/* Boxed */
body[data-site-layout="boxed"] {
    background-color: var(--site-layout-bg-color, #f5f5f5);
}
body[data-site-layout="boxed"] .site-wrapper {
    max-width: var(--site-layout-max-width, 1400px);
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
    position: relative;
}

/* Keep the sticky header constrained to the box.
 * The theme's global rule applies `position: fixed; width: 100%` to the
 * INNER `.header__top` (and `.header__content` for the standard variant),
 * not the outer wrapper, so centering overrides have to target those
 * elements directly — anything else is a no-op. */
body[data-site-layout="boxed"] .header.header--sticky .header__top,
body[data-site-layout="boxed"] .header--standard.header--sticky .header__content {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    max-width: var(--site-layout-max-width, 1400px);
    width: 100%;
}

/* Below the boxed breakpoint, expand to fill the viewport so phones aren't
 * unnecessarily indented and don't show the outer background. */
@media (max-width: 768px) {
    body[data-site-layout="boxed"] .site-wrapper {
        max-width: 100%;
        box-shadow: none;
    }
    body[data-site-layout="boxed"] .header.header--sticky .header__top,
    body[data-site-layout="boxed"] .header--standard.header--sticky .header__content {
        left: 0 !important;
        transform: none !important;
        max-width: 100%;
    }
}