/* =====================================================================
   MyvanCMS — page width override
   ---------------------------------------------------------------------
   THE PROBLEM THIS FIXES

   palace.css caps every page at:

       .pl-container{max-width:1320px; padding-inline:24px}

   so the content column is 1272px no matter how wide the display is. Measured
   in a browser:

       viewport   content   empty each side   screen used
       1920px     1272px    324px             66%
       1600px     1272px    164px             80%
       1440px     1272px     84px             88%

   On a large monitor a third of the screen is dead margin. That gap — not the
   left/right PADDING, which is only 24px — is what reads as "the margin is too
   big". Shrinking the padding cannot help, because the padding is not what
   creates the gap; the max-width is.

   ---------------------------------------------------------------------
   WHAT THIS DOES

   Raises the cap to 1680px and lets it breathe with the viewport, so wide
   displays fill out while narrow ones are untouched:

       viewport   content   empty each side   screen used
       1920px     1632px     144px            85%
       1600px     1488px      56px            93%
       1440px     1344px      48px            93%
       1366px     1278px      44px            94%

   Vertical spacing is DELIBERATELY NOT TOUCHED here. An earlier version of this
   file tightened .section, the footer and Bootstrap's -5 step; that was the
   wrong read of the request and has been removed, so palace.css's original
   vertical rhythm (96px sections, 80px footer) applies again unchanged.

   ---------------------------------------------------------------------
   TO TUNE: change --page-max below.
     1320px = the original palace width (i.e. revert)
     1560px = conservative widening
     1680px = current
     1800px+ = very wide; text-heavy pages start to feel stretched

   TO REVERT COMPLETELY: delete the <link> to this file in
   app/Views/layouts/public.php.
   ===================================================================== */

:root{
  --page-max:1680px;   /* was 1320px in palace.css */
  --page-gutter:32px;  /* breathing room at the edges on mid-size screens */
}

/*
 * min() keeps two rules at once: never wider than --page-max, and never closer
 * to the window edge than --page-gutter. So there is no breakpoint where the
 * content slams against the side of the screen.
 *
 * padding-inline stays at palace.css's 24px — it was never the problem, and
 * shrinking it would push text uncomfortably close to the edge on mobile.
 */
.pl-container{
  max-width:min(var(--page-max), calc(100vw - var(--page-gutter) * 2));
}

/*
 * .pl-panel is the rounded off-white slab behind several bands (its own cap is
 * 1400px, slightly wider than the container by design). Scaled by the same
 * proportion so it stays wider than the content it frames rather than becoming
 * narrower than it.
 */
.pl-panel{
  max-width:min(calc(var(--page-max) + 80px), calc(100vw - var(--page-gutter)));
}

/* --- Narrow screens -------------------------------------------------
   Below the container's natural cap there is nothing to widen, so the gutter
   just shrinks. palace.css already drops padding-inline to 16px under 768px;
   that is left alone.
   ------------------------------------------------------------------ */
@media (max-width:1199.98px){
  :root{--page-gutter:20px}
}

@media (max-width:767.98px){
  :root{--page-gutter:0px}
}