/* ═══════════════════════════════════════════════════════════════════════════
   One container for the whole public site — Bootstrap 5's widths.

   Loaded LAST by base_public.html (after each page's own <style>), so these
   rules decide the horizontal geometry everywhere: the navbar, every section
   and the footer start and end on the same two lines at every screen width.

     <576   fluid      ≥576 540   ≥768 720   ≥992 960   ≥1200 1140   ≥1400 1320
     gutter 12px (0.75rem) inside the container, as in Bootstrap.

   Two ways in, depending on whether the element paints edge to edge:
   • full-bleed bands (navbar, footer, <section>, heroes with a background)
     keep their full width and get --vw-page-pad: the padding that puts their
     content exactly on the container's content edge;
   • stand-alone page wrappers (.rel-wrap, .bug-wrap …) ARE the container.
   Wrappers that used to sit inside a band with their own max-width now just
   fill it. Reading columns (subtitles, FAQ, forms) stay narrower, centred —
   like a .col-lg-8 inside a container.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --vw-gutter: 0.75rem;
  --vw-container: 100%;
  --vw-reading: 860px;
  /* Padding of a full-width band so its content lines up with the container. */
  --vw-page-pad: max(var(--vw-gutter), calc((100% - var(--vw-container)) / 2 + var(--vw-gutter)));
}
@media (min-width: 576px)  { :root { --vw-container: 540px; } }
@media (min-width: 768px)  { :root { --vw-container: 720px; } }
@media (min-width: 992px)  { :root { --vw-container: 960px; } }
@media (min-width: 1200px) { :root { --vw-container: 1140px; } }
@media (min-width: 1400px) { :root { --vw-container: 1320px; } }

/* The utility itself, for new markup. */
.vw-container {
  width: 100%; max-width: var(--vw-container); margin-inline: auto;
  padding-inline: var(--vw-gutter); box-sizing: border-box;
}

/* ── Full-bleed bands: content on the container edge ────────────────────── */
nav.nav,
.pub-footer-inner,
section,
.hero, .sia, .langs-section, .ms-section, .install-section, .plugins-section, .showcase-section,
.store-hero, .store-body-wrap, .apps-section,
.fx-hero, .pr-hero, .bh, .pia, .why-hero, .hd-head, .faq-hero,
.bd-hero, .plugin-detail-wrap, .cats, .blog-layout, .rel-head {
  padding-left: var(--vw-page-pad) !important;
  padding-right: var(--vw-page-pad) !important;
  box-sizing: border-box;
}

/* ── Inner wrappers of those bands: fill the band (it already aligns them) ─ */
.hero-container, .sia-wrap, .cf-group, .showcase-wrap, .hp-plan-grid, .install-card,
.ms-wrap, .ps-wrap, .blog-grid, .cf-grid, .apps-grid, .pricing-tier-head, .pricing-grid,
.store-hero-inner, .store-body, .pia-inner, .why-hero-in, .hd-head-inner, .bd-hero-inner {
  max-width: none !important;
  margin-left: 0 !important; margin-right: 0 !important;
  width: auto;
}

/* ── Stand-alone page wrappers: they are the container ──────────────────── */
.rel-wrap, .bug-wrap, .hd-body, .why-wrap, .bd-wrap, .co, .faq-body {
  width: 100%;
  max-width: var(--vw-container) !important;
  margin-left: auto !important; margin-right: auto !important;
  padding-left: var(--vw-gutter) !important; padding-right: var(--vw-gutter) !important;
  box-sizing: border-box;
}
/* A .why-wrap sits inside .why, which is full width: same edges as above. */

/* ── Reading columns: narrower, centred inside the container ────────────── */
.bug-wrap.narrow, .fin {
  width: 100%;
  max-width: min(var(--vw-container), var(--vw-reading)) !important;
  margin-left: auto !important; margin-right: auto !important;
  padding-left: var(--vw-gutter) !important; padding-right: var(--vw-gutter) !important;
  box-sizing: border-box;
}

/* The hero's brand band spans the viewport (100vw); its stats sit in the container. */
.hero-stats-inner {
  width: 100% !important; max-width: var(--vw-container);
  margin-left: auto !important; margin-right: auto !important;
  padding-left: var(--vw-gutter); padding-right: var(--vw-gutter); box-sizing: border-box;
}

/* The article/page header's inner box keeps its vertical padding only. */
.bd-hero-inner { padding-left: 0 !important; padding-right: 0 !important; }