/* ==========================================================================
   NHLGambling.com SHARED STYLESHEET -- FLAT VERSION (one big panel, no boxes inside)   (deploy to /assets/site-flat.css)
   Linked from a page with:  <link rel="stylesheet" href="/assets/site.css?v=1">  just before </head>
   Only pages that link it get these rules, so you can roll it out one page at a time.
   When you change this file, bump the ?v=1 on the pages (v=2, v=3 ...) so browsers fetch the new copy.
   ========================================================================== */

/* ---- 1. SITE BACKGROUND IMAGE (added 2026-10-26) ----
   /images/bkg.jpg sits fixed behind the page; the main container (.wrap) becomes a dark see-through panel on top of it.
   Tune the look with these two numbers:
     --bkg-panel : how dark the content panel is  (0 = clear ... 1 = solid black)
     --bkg-dim   : extra darkening laid over the picture itself                                                      */
:root{ --bkg-panel:0.80; --bkg-dim:0.35; }

body{ background:transparent !important; }
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(rgba(10,13,18,var(--bkg-dim)), rgba(10,13,18,var(--bkg-dim))),
    url('/images/bkg.php') center center / cover no-repeat,
    var(--bg, #0a0d12);
}
.wrap{
  background:rgba(10,13,18,var(--bkg-panel));
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  margin-top:15px; margin-bottom:40px;
  padding-bottom:60px;
}
@media (max-width:1220px){ .wrap{ margin-left:10px; margin-right:10px; } }
@media (max-width:600px){  .wrap{ margin:8px 6px 24px; border-radius:14px; } }

/* Footer: solid, so the background picture doesn't show through behind it on short pages. */
.site-footer{ background:var(--bg,#0a0d12) !important; position:relative; z-index:1; }
/* Short pages: push the footer to the bottom of the screen so the picture doesn't continue underneath it. */
#siteFooter{ margin-top:auto; }

/* ---- ONE-BIG-CONTAINER PREVIEW (team page): the big sections lose their own box and are separated by a thin line instead ---- */
.sticky-top{ background:transparent !important; }
.team-header{ background:none !important; border:none !important; border-radius:0 !important; padding-left:0 !important; padding-right:0 !important; }
.team-bettor-card{ background:none !important; border:none !important; border-radius:0 !important; padding-left:0 !important; padding-right:0 !important; }
.chart-card{
  background:none !important; border:none !important; border-radius:0 !important;
  border-top:1px solid rgba(255,255,255,.10) !important;
  margin-top:10px !important; padding-top:22px !important;
}
.chart-head{ border-bottom:none !important; margin-bottom:0 !important; }   /* no line under each section heading -- only the one line between sections */