/**
 * Boost Theme - Container Width System
 *
 * ARCHITECTURE:
 * - Header/Footer (CPT): wrapper has data-container-width from their metabox
 * - Content blocks: body.boost-layout-X (page metabox) > .boost-container-X (JSON)
 * - Mobile: everything edge-to-edge with padding
 *
 * @package BoostTheme
 */

/* === VARIABLES === */
:root {
  --boost-narrow: 720px;
  --boost-default: 1200px;
  --boost-wide: 1400px;
  --boost-gutter: 1.5rem;
}

html { overflow-x: hidden; }

/* =============================================
   1. HEADER - CPT INDEPENDENT
   ============================================= */

.boost-site-header,
.boost-block-header {
  width: 100%;
  max-width: none;
}

.boost-site-header .header-container,
.boost-block-header .header-container {
  max-width: var(--boost-default);
  margin: 0 auto;
  padding: 0 var(--boost-gutter);
}

.boost-site-header[data-container-width="narrow"] .header-container { max-width: var(--boost-narrow); }
.boost-site-header[data-container-width="wide"] .header-container { max-width: var(--boost-wide); }
.boost-site-header[data-container-width="full"] .header-container { max-width: none; }

/* =============================================
   2. FOOTER - CPT INDEPENDENT
   ============================================= */

.boost-site-footer,
.boost-block-footer {
  width: 100%;
  max-width: none;
}

.boost-site-footer .boost-block-footer__inner,
.boost-block-footer .boost-block-footer__inner {
  max-width: var(--boost-default);
  margin: 0 auto;
  padding: 6rem var(--boost-gutter) 3rem;
}

.boost-site-footer[data-container-width="narrow"] .boost-block-footer__inner { max-width: var(--boost-narrow); }
.boost-site-footer[data-container-width="wide"] .boost-block-footer__inner { max-width: var(--boost-wide); }
.boost-site-footer[data-container-width="full"] .boost-block-footer__inner { max-width: none; }

/* =============================================
   3. CONTENT BLOCKS - Base Styles
   ============================================= */

section[class*="boost-block-"] {
  width: 100%;
  box-sizing: border-box;
}

section[class*="boost-block-"] [class$="-container"] {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0 var(--boost-gutter);
  box-sizing: border-box;
}

/* =============================================
   4. JSON containerWidth Classes
   ============================================= */

section.boost-container-narrow [class$="-container"] { max-width: var(--boost-narrow); }
section.boost-container-default [class$="-container"] { max-width: var(--boost-default); }
section.boost-container-wide [class$="-container"] { max-width: var(--boost-wide); }
section.boost-container-full [class$="-container"] { max-width: none; }

/* =============================================
   5. PAGE METABOX OVERRIDES
   ============================================= */

body.boost-layout-narrow section[class*="boost-block-"]:not(.boost-block-header):not(.boost-block-footer) [class$="-container"] {
  max-width: var(--boost-narrow) !important;
}

body.boost-layout-contained section[class*="boost-block-"]:not(.boost-block-header):not(.boost-block-footer) [class$="-container"] {
  max-width: var(--boost-default) !important;
}

body.boost-layout-wide section[class*="boost-block-"]:not(.boost-block-header):not(.boost-block-footer) [class$="-container"] {
  max-width: var(--boost-wide) !important;
}

body.boost-layout-full-width section[class*="boost-block-"]:not(.boost-block-header):not(.boost-block-footer) [class$="-container"] {
  max-width: none !important;
}

body.boost-layout-sidebar-left section[class*="boost-block-"] [class$="-container"],
body.boost-layout-sidebar-right section[class*="boost-block-"] [class$="-container"] {
  max-width: 100% !important;
}

/* =============================================
   6. MOBILE - ALL EDGE-TO-EDGE + PADDING
   ============================================= */

@media (max-width: 768px) {
  :root { --boost-gutter: 1rem; }
  
  /* Header */
  .boost-site-header .header-container,
  .boost-block-header .header-container {
    max-width: none !important;
    padding-left: var(--boost-gutter) !important;
    padding-right: var(--boost-gutter) !important;
  }
  
  /* Footer - MUST have padding */
  .boost-site-footer .boost-block-footer__inner,
  .boost-block-footer .boost-block-footer__inner {
    max-width: none !important;
    padding: 4rem var(--boost-gutter) 2rem !important;
  }
  
  /* All content blocks */
  section[class*="boost-block-"] [class$="-container"] {
    max-width: none !important;
    padding-left: var(--boost-gutter) !important;
    padding-right: var(--boost-gutter) !important;
  }
}

/* =============================================
   7. BLOCK-SPECIFIC OVERRIDES
   ============================================= */

.boost-block-hero .hero-container {
  position: relative;
  z-index: 1;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (max-width: 768px) {
  .boost-block-hero .hero-container {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}