/* ==========================================================================
   layout-overrides.css  —  edge-to-edge sections, inner content capped at 1536px
   --------------------------------------------------------------------------
   Loaded LAST in both stacks so it wins the cascade:
     - Blade marketing site : final <link> in resources/views/layouts/style.blade.php
     - Inertia / Vue app    : final @import in resources/css/app.css

   Why this file exists:
   The purchased theme (public/assets/css/main.min.css) redefines Bootstrap's
   `.container` to a flat `max-width: 1250px` (+ 960px / 720px at breakpoints).
   That is the ONLY thing capping page width. Bootstrap itself is imported
   precompiled (bootstrap.min.css), so there is no Sass / $container-max-widths
   to change — we override in plain CSS here instead.

   Result:
     - <header> / <section> / <footer> stay full-bleed (they already are —
       the theme wraps every section as `<section class="…bg…"><div class="container">`)
     - `.container` (and the new `.content-wrap`) cap inner content at 1536px,
       centered, with auto side-gutters that grow to ~192px+/side on wide screens
     - below 1536px viewport, `width: 100%` governs and only the fluid
       `padding-inline` gutter applies — mobile stays full-width with small gutters
   ========================================================================== */

/* Opt-in helper for any wrapper that should span the full viewport width. */
.full-bleed {
    width: 100%;
}

/* The shared inner wrapper.
   `.content-wrap` is the new canonical class (usable in Blade and Vue markup);
   `.container` is mapped onto it so all existing theme sections inherit the new
   width with zero template edits. `width: 100%` + `max-width` means no media
   queries are needed: under 1536px the width is fluid, over it the content is
   capped and the auto margins form the large side gutters. */
.content-wrap,
.container {
    width: 100%;
    max-width: 1536px;
    margin-inline: auto;
    /* Fluid gutter: 1rem on small screens, ~4vw mid-range, 2rem cap.
       Bootstrap's `.row` uses -15px negative margins (--bs-gutter-x / -2),
       and this floor (16px) clears that, so `.row` inside `.content-wrap`
       never overflows and the paddings don't visually double up. */
    padding-inline: clamp(1rem, 4vw, 2rem);
}

/* Theme's oversized wrapper (defined at 1760px in main.min.css, currently unused
   in any view) — kept in sync in case it gets adopted later. */
.custom-container {
    width: 100%;
    max-width: 1536px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

/* --------------------------------------------------------------------------
   Header nav — wider inner cap than the rest of the site.
   The bar background (#sticky-header / .tg-header__area) is already full-bleed;
   only its inner `.container` is widened here, from 1536px to 1905px.
   The id selector outranks the `.container` rule above, so no !important.
   -------------------------------------------------------------------------- */
#sticky-header > .container {
    max-width: 1905px;
}