/* =============================================================================
 * bn-width.css — Black Note site-wide width system (project_44)
 * -----------------------------------------------------------------------------
 * Implements "Page Width & Responsive Spec" v1.1 (2026-07-16): one 1200px
 * active width for header, footer, and every page shell, with a token-driven
 * side gutter so content never touches the screen edge, and a separate 700px
 * reading measure for long-form text.
 *
 * Loaded LATE (priority 99) by bn-width-system.php so it wins order ties
 * against the theme ladder, bn-customizer.css, and Elementor generated CSS.
 * RUCSS-excluded (filter lives in the loader) — this sheet must ship whole.
 *
 * Implementation choice (spec allows either): shells are `max-width: 1200px`
 * boxes whose OWN horizontal padding is the gutter. With Bootstrap 5's
 * row(-12px)/col(+12px) math, text lands exactly at the gutter inset on every
 * screen size and nothing overflows the box. Elementor containers instead get
 * the margin-based min() formula because their columns carry their own padding.
 *
 * NOT touched on purpose:
 *   - Landing templates (template-landing/-landing2): intentionally full-bleed.
 *   - My Account dashboard 1140 inner column (project_7): a content column
 *     inside the shell, not a shell.
 * ========================================================================== */

/* --- 1. TOKENS (one source of truth) ------------------------------------- */
:root{
  --bn-container: 1200px;  /* the one active width */
  --bn-gutter: 20px;       /* mobile ≤640px */
  --bn-measure: 700px;     /* long-form reading column (~72ch @ 18px) */
}
@media (min-width: 641px){
  :root{ --bn-gutter: 24px; }  /* tablet + desktop */
}

/* --- 2. BOOTSTRAP-FAMILY SHELLS ------------------------------------------ */
/* Retires the theme ladder (540/720/960/1140/1320 + child 1410@1600). One
   rule, all breakpoints: box caps at 1200, own padding is the gutter. */
.container{
  max-width: var(--bn-container) !important;
  padding-left: var(--bn-gutter) !important;
  padding-right: var(--bn-gutter) !important;
}

/* The ACF module templates (template-parts/modules/*.php) shell their content in
   Bootstrap's RESPONSIVE container classes — `.container-md` by default, and the
   `container_size` ACF field can emit the others. Those were missed when this
   system landed, so every module page sat at Bootstrap's 12px gutter = 1176px
   content, 24px wider than the header, footer and every other shell at 1152px.
   Added 2026-07-20 (spotted on /earn-points/): same token, same result. */
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl{
  max-width: var(--bn-container) !important;
  padding-left: var(--bn-gutter) !important;
  padding-right: var(--bn-gutter) !important;
}

/* bn-customizer.css sets these same surfaces to 1320px!important with zero
   padding at (0,3,0) specificity — replicate the selector list so the token
   wins (equal specificity + !important, later in the cascade). */
body.page-template-blog .container.margin-default,
body.page-template-1410px .container.margin-default,
body.search-results .inner-page.margin-default,
body.archive .container.margin-default{
  max-width: var(--bn-container) !important;
  padding-left: var(--bn-gutter) !important;
  padding-right: var(--bn-gutter) !important;
}

/* --- 3. HEADER ------------------------------------------------------------ */
/* Desktop nav bar. header.php used to hardcode this inline as
   max-width:1350px!important — the inline style is removed in the template
   (same change set); this is now its only width source. */
.container-custom{
  max-width: var(--bn-container) !important;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--bn-gutter) !important;
  padding-right: var(--bn-gutter) !important;
}

/* --- 4. ELEMENTOR SHELLS (marketing pages) -------------------------------- */
/* Elementor columns carry their own gap padding, so the gutter is applied as
   the margin-based formula instead of padding (avoids double-gutter). Beats
   Elementor's generated per-page CSS and bn-customizer's legacy footer 1410px
   !important. (The real footer is section.footer-main > .container — covered
   by the base .container rule above.) */
.elementor-section.elementor-section-boxed > .elementor-container,
.elementor-location-footer .elementor-container{
  max-width: min(var(--bn-container), 100% - 2*var(--bn-gutter)) !important;
}

/* --- 5. DESKTOP NAV ROW ALIGNMENT ----------------------------------------- */
/* Folded in from DB snippet #61 "Header-body width 1240 + nav alignment v1
   (Cowork) [card 77]" — an interim block whose width half (1240px!important at
   (0,2,0)) this system supersedes. The alignment half is kept: logo left, nav
   right, no wrap, natural column widths. Snippet #61 must stay DEACTIVATED or
   its 1240 outranks the 1200 token. */
@media (min-width: 1200px){
  .wrap-menu-desktop .row{
    justify-content: space-between !important;
    align-items: center;
    flex-wrap: nowrap;
  }
  .wrap-menu-desktop .row > .col-md-10{
    flex: 0 1 auto; width: auto; max-width: none;
    justify-content: flex-start !important;
  }
  .wrap-menu-desktop .row > .col-md-2{
    flex: 0 0 auto; width: auto; max-width: none;
  }
}

/* --- 6. TOP WARNING BAR CONTENT ------------------------------------------- */
/* The black FDA warning bar (.top-header2) and the gold announcement bar stay
   full-bleed by design. Only the warning bar's inner content (ACF HTML,
   typically a <p>) is capped so the text can never run wider than the grid. */
.top-header2 > *{
  max-width: var(--bn-container);
  margin-left: auto;
  margin-right: auto;
}

/* --- 7. BLOG POST READING COLUMN ------------------------------------------ */
/* Shell is already the (now 1200px) .container.main-wrapper; cap the prose
   column at the reading measure inside it. Rich blog-kit blocks currently
   share the cap — revisit if a module needs the 900–1000px allowance. */
.single-post .blog-post{
  max-width: var(--bn-measure);
  margin-left: auto;
  margin-right: auto;
}

/* bn-customizer.css (mobile media block, ~line 3089) pushes single posts right
   with 10px side margins — a 10px horizontal overflow on phones — and
   blog-kit.css:162 counter-patches it for kit posts only. Both are obsolete now
   that the shell carries token gutters; neutralize (!important beats the kit
   patch). Delete both at CSS consolidation. */
body.single-post .main-wrapper{
  margin-left: auto !important;
  margin-right: auto !important;
}