/* ========== Site-wide background fix ==========
   The header uses a Global Class ("header-shading", g-952ed9a) that applies a
   linear-gradient overlay fading from rgba(0,0,0,0.9) at the top to rgba(0,0,0,0.03)
   at the bottom — it relies on the BODY background to fill behind it. The WP default
   body bg is white, which is what creates the "white gap" effect under the header.
   Setting the body to solid black means the gradient fades into the site's dark
   theme instead of revealing white. */
html, body{background-color:#000000 !important;}

/* ========== Allstars Game Template ========== */
.asg-page,
.asgi-page{
    color:#FFFFFF;
    background:#000000;
    font-family:'Montserrat',"Montserrat Fallback", sans-serif;
    margin:0;
    padding:0;
    position:relative;
    isolation:isolate;
}
/* === Sparkle-stars background layer (matches the rest of the site).
   Fixed full-viewport, low-opacity, low-z-index so it sits behind everything
   else on the page. Hero photos / stat boxes / equipment box keep their own
   solid backgrounds, so the sparkles only show through the gradient "intro"
   sections — same treatment as the off-canvas menu and the Figma design. */
.asg-page::before,
.asgi-page::before{
    content:"";
    position:fixed;
    inset:0;
    background-image:url('https://allstarssportsbars.co.uk/wp-content/uploads/2026/06/BG_Red_Sparklestars.avif');
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    opacity:0.45;
    pointer-events:none;
    z-index:-1;
}
/* Pull the hero up under the (sticky, transparent) header so the photo runs to the
   very top of the viewport and the header sits over it as a layer. The 90px figure
   matches the header's fixed height — keep these in sync if the header height changes. */
.asg-page > .asg-hero,
.asgi-page > .asgi-hero{margin-top:-90px;}
/* Kill EVERY ancestor's top margin/padding on a single game page so the hero sits flush under the sticky header.
   The chain is: <main> > [data-elementor-type=single-post] > .e-con (id 415082f) > .elementor-widget-shortcode > .elementor-shortcode > .asg-page > .asg-hero */
.single-game main,
.single-game .site-main,
.single-game #content,
.single-game .page-content,
.single-game .elementor-location-single,
.single-game .elementor-location-single > .elementor,
.single-game [data-elementor-type="single-post"],
.single-game [data-elementor-type="single-post"] > .elementor-element,
.single-game [data-elementor-type="single-post"] .elementor-widget-shortcode,
.single-game [data-elementor-type="single-post"] .elementor-shortcode,
.single-game .asg-page{
    margin-top:0 !important;
    padding-top:0 !important;
    margin-bottom:0 !important;
    padding-bottom:0 !important;
}
/* The Elementor container ID itself — force all padding off via the CSS variables it uses */
.elementor-element.elementor-element-415082f,
.single-game .elementor-element.elementor-element-415082f{
    --padding-top:0 !important;
    --padding-bottom:0 !important;
    --padding-left:0 !important;
    --padding-right:0 !important;
    padding:0 !important;
    margin:0 !important;
}

.asg-section{position:relative;}
.asg-section__inner{
    max-width:1180px;
    margin:0 auto;
    padding:80px 24px;
}

/* Hero */
.asg-hero{
    position:relative;
    height:min(864px, 85vh);
    min-height:580px;
    margin-top:0;
    background-color:#0a0a0a;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    border-bottom-left-radius:15px;
    border-bottom-right-radius:15px;
    /* overflow visible so the BOOK NOW button can sit half-over the next section */
    overflow:visible;
    z-index:5;
}
.asg-hero__cta{
    position:absolute;
    left:50%;
    bottom:-28px;
    transform:translateX(-50%);
    z-index:30;
}
/* The intro section sits behind the hero CTA */
.asg-section--intro{z-index:1;}

/* Intro block — transparent so the sparkle background layer shows through.
   The red radial-gradient stays as a subtle accent. */
.asg-section--intro{
    background:transparent;
    background-image:radial-gradient(ellipse at top, rgba(197,51,34,0.18), transparent 60%);
}
.asg-section--intro .asg-section__inner{padding-top:120px;}
.asg-intro{text-align:center;margin-bottom:48px;}
.asg-intro__title{
    font-family:'Rajdhani', sans-serif;
    font-weight:700;
    font-size:70px;
    line-height:0.8;
    color:#FFFFFF;
    text-transform:uppercase;
    margin:0 0 24px 0;
}
.asg-intro__subhead{
    font-family:'Rajdhani', sans-serif;
    font-weight:700;
    font-size:42px;
    line-height:0.9;
    color:#FFFFFF;
    text-transform:uppercase;
    margin:0 0 24px 0;
}
.asg-intro__body{
    font-family:'Montserrat',"Montserrat Fallback", sans-serif;
    font-weight:400;
    font-size:18px;
    line-height:1.4;
    color:#FFFFFF;
    max-width:820px;
    margin:0 auto;
}

/* Venue + Equipment row — mirrors the stats row underneath (1fr 1fr) so the image
   lines up flush with the stat--count column and the equipment list aligns with the
   pricing box. */
.asg-venue-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    align-items:stretch;
    margin-bottom:20px;
}
/* When only one of the two slots has content, drop to a single full-width column
   so we don't render a lonely half-width box. */
.asg-venue-row--no-image,
.asg-venue-row--no-equipment{
    grid-template-columns:1fr;
}
.asg-venue-row__image{
    height:340px;
    background-size:cover;
    background-position:center center;
    background-color:#0a0a0a;
    border:1px solid #4D5358;
    border-radius:15px;
}
.asg-venue-row__equipment{
    padding:28px 32px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:18px;
    color:#FFFFFF;
}
.asg-equipment__title{
    font-family:'Rajdhani', sans-serif;
    font-weight:700;
    font-size:28px;
    line-height:1.1;
    letter-spacing:0.5px;
    text-transform:uppercase;
    color:#FFFFFF;
    margin:0;
}
.asg-equipment__list{
    list-style:none;
    margin:0;
    padding:0;
}
.asg-equipment__list li{
    position:relative;
    padding-left:22px;
    font-size:18px;
    line-height:1.45;
    color:#FFFFFF;
    margin:0 0 10px 0;
}
.asg-equipment__list li::before{
    content:"•";
    position:absolute;
    left:0;
    top:0;
    color:#C53322;
    font-size:22px;
    line-height:1.2;
}
.asg-equipment__tail{
    margin:12px 0 0 0;
    font-size:18px;
    line-height:1.45;
    color:#FFFFFF;
}

/* Stats row */
.asg-stats-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-bottom:40px;
}
.asg-stat{
    background:#000000;
    border:1px solid #4D5358;
    border-radius:15px;
    padding:24px 32px;
    display:flex;
    align-items:center;
    gap:20px;
}
/* Icon hard-left, number sits roughly centre (space-between), and the label is
   nudged ~26px left of its original right-edge position to tighten the
   number<->label gap a touch. */
.asg-stat--count{justify-content:space-between;}
.asg-stat--count .asg-stat__label{margin-right:26px;}
.asg-stat--count .asg-stat__big{position:relative;left:20px;} /* nudge the number 20px towards the label */
.asg-stat__icon{
    width:74px;
    height:74px;
    color:#FFFFFF;
    flex-shrink:0;
}
.asg-stat__icon--star,
.asg-stat__icon--logo{width:80px;height:80px;color:#FFFFFF;}
.asg-stat__icon svg{width:100%;height:100%;display:block;}
.asg-stat__icon-img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center center;
}
.asg-stat__big{
    font-family:'Rajdhani', sans-serif;
    font-weight:700;
    font-size:70px;
    line-height:0.8;
    color:#FFFFFF;
    text-transform:uppercase;
}
.asg-stat__label{
    font-family:'Montserrat',"Montserrat Fallback", sans-serif;
    font-weight:400;
    font-size:18px;
    line-height:1.4;
    color:#FFFFFF;
}
.asg-stat__price-block{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    flex:1;
    text-align:center;
}
.asg-stat__price-main{
    font-size:18px;
    line-height:1.4;
    color:#FFFFFF;
    margin:0;
}
.asg-stat__price-sub{
    font-size:10px;
    line-height:1.4;
    color:#FFFFFF;
    margin:0;
}
.asg-stat__price-foot{
    font-size:10px;
    line-height:1.4;
    color:#FFFFFF;
    margin:0;
    max-width:233px;
}

/* Actions */
.asg-actions{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
    margin:0 auto 40px;
}
.asg-actions__buttons{
    display:flex;
    gap:12px;
    width:504px;
    max-width:100%;
}
.asg-actions__buttons .asg-btn{flex:1;}
.asg-actions__age-note{
    font-family:'Montserrat',"Montserrat Fallback", sans-serif;
    font-weight:700;
    font-size:18px;
    line-height:1.1;
    color:#FFFFFF;
    text-align:center;
    margin:0;
}

/* Competitions */
.asg-competitions{text-align:center;color:#FFFFFF;margin-top:20px;}
.asg-competitions__title{
    font-family:'Rajdhani', sans-serif;
    font-weight:700;
    font-size:42px;
    line-height:0.9;
    color:#FFFFFF;
    text-transform:uppercase;
    margin:0 0 20px 0;
}
.asg-competitions__body{
    font-size:18px;
    line-height:1.4;
    color:#FFFFFF;
    max-width:820px;
    margin:0 auto;
}
.asg-competitions__body p{margin:0 0 14px 0;}
.asg-competitions__body a{color:#FFFFFF;text-decoration:underline;}
.asg-competitions__body a:hover{color:#C53322;}

/* Buttons */
.asg-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:48px;
    padding:0 20px;
    border-radius:10px;
    font-family:'Montserrat',"Montserrat Fallback", sans-serif;
    font-weight:500;
    font-size:14px;
    line-height:1;
    letter-spacing:0.5px;
    text-transform:uppercase;
    text-decoration:none;
    transition:background-color .2s ease, color .2s ease, transform .2s ease;
    border:2px solid #C53322;
}
/* Defensive no-underline override: bumps specificity above any theme/Gutenberg link rule
   (e.g. ".entry-content a", ".wp-block-* a", etc.) that may apply on different page types. */
a.asg-btn,
.asg-tile a.asg-btn,
.asg-tile__buttons a.asg-btn,
.asg-other-games__grid a.asg-btn,
.asg-actions__buttons a.asg-btn,
.asg-hero a.asg-btn{
    text-decoration:none !important;
}
.asg-btn--solid{background:#C53322;color:#FFFFFF;}
.asg-btn--solid:hover,
.asg-btn--solid:focus-visible{background:#000000;border-color:#C53322;color:#FFFFFF;outline:none;}
.asg-btn--outline{background:transparent;color:#FFFFFF;}
.asg-btn--outline:hover{background:#C53322;color:#FFFFFF;}
.asg-btn--lg{height:56px;padding:0 32px;font-size:20px;border-radius:15px;}
.asg-btn--sm{height:40px;padding:0 16px;}

/* OUR GAMES section */
.asg-section--tiles .asg-section__inner{padding:80px 24px;}
.asg-other-games{display:flex;flex-direction:column;gap:64px;}
.asg-other-games__heading{
    font-family:'Rajdhani', sans-serif;
    font-weight:700;
    font-size:70px;
    line-height:0.8;
    color:#FFFFFF;
    text-transform:uppercase;
    text-align:center;
    margin:0;
}
.asg-other-games__grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:29px;
}
.asg-other-games[data-cols="3"] .asg-other-games__grid{grid-template-columns:repeat(3, 1fr);}
.asg-other-games[data-cols="4"] .asg-other-games__grid{grid-template-columns:repeat(4, 1fr);}

/* 3-2 layout: top row 3 tiles, bottom row 2 tiles, both rows fill the full width.
   Achieved with a 6-col grid where items 1-3 span 2 each (33% each) and items 4-5 span 3 each (50% each). */
.asg-other-games[data-layout="3-2"] .asg-other-games__grid{
    grid-template-columns:repeat(6, 1fr);
}
.asg-other-games[data-layout="3-2"] .asg-tile:nth-child(-n+3){grid-column:span 2;}
.asg-other-games[data-layout="3-2"] .asg-tile:nth-child(n+4){grid-column:span 3;}
.asg-tile{
    display:flex;
    flex-direction:column;
    height:479px;
    background:#0a0a0a;
    border:2px solid #4D5358;
    border-radius:15px;
    overflow:hidden;
    transition:transform .25s ease, border-color .25s ease;
}
.asg-tile:hover{transform:translateY(-4px);border-color:#C53322;}
.asg-tile__image{
    flex:1;
    background-color:#1a1a1a;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    display:block;
}
.asg-tile__image--logo{
    background-size:55% auto;
}
.asg-tile__foot{
    background:#000000;
    padding:24px 16px;
    display:flex;
    flex-direction:column;
    gap:18px;
    height:180px;
}
.asg-tile__title{
    flex:1;
    margin:0;
    font-family:'Rajdhani', sans-serif;
    font-weight:700;
    font-size:32px;
    line-height:0.95;
    color:#FFFFFF;
    text-transform:uppercase;
    text-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
}
.asg-tile__buttons{
    display:flex;
    gap:12px;
}
.asg-tile__buttons .asg-btn{flex:1;}

/* Divider component (uses existing [allstars_divider] — leave default) */
/* Newsletter (be-the-first-to-know) now lives in the footer via [allstars_newsletter] — styles in allstars-newsletter.php */

/* ========== Games Index Page ([allstars_games_index]) ========== */
/* Kill any wrapping theme/Elementor padding so the hero sits flush under the sticky header.
   Uses :has() to target whichever page contains the games-index shortcode. */
body:has(.asgi-page) main,
body:has(.asgi-page) .site-main,
body:has(.asgi-page) #content,
body:has(.asgi-page) .page-content,
body:has(.asgi-page) .entry-content,
body:has(.asgi-page) article.page,
body:has(.asgi-page) [data-elementor-type="wp-page"],
body:has(.asgi-page) .asgi-page{
    margin-top:0 !important;
    padding-top:0 !important;
    max-width:none !important;
}
.asgi-page{
    color:#FFFFFF;
    background:#000000;
    font-family:'Montserrat',"Montserrat Fallback", sans-serif;
    margin:0;
    padding:0;
}
.asgi-hero{
    position:relative;
    width:100%;
    height:min(864px, 85vh);
    min-height:580px;
    background-color:#0a0a0a;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
}
.asgi-intro{
    background:transparent;
    background-image:radial-gradient(ellipse at top, rgba(197,51,34,0.18), transparent 60%);
}
.asgi-intro__inner{
    max-width:1180px;
    margin:0 auto;
    padding:80px 24px 40px;
    text-align:center;
}
.asgi-intro__title{
    font-family:'Rajdhani', sans-serif;
    font-weight:700;
    font-size:70px;
    line-height:0.8;
    color:#FFFFFF;
    text-transform:uppercase;
    margin:0 0 20px 0;
}
.asgi-intro__subtitle{
    font-family:'Rajdhani', sans-serif;
    font-weight:700;
    font-size:42px;
    line-height:0.9;
    color:#FFFFFF;
    text-transform:uppercase;
    margin:0 0 24px 0;
}
.asgi-intro__body{
    font-family:'Montserrat',"Montserrat Fallback", sans-serif;
    font-weight:400;
    font-size:18px;
    line-height:1.4;
    color:#FFFFFF;
    max-width:820px;
    margin:0 auto 16px;
}
.asgi-intro__age-note{
    font-family:'Montserrat',"Montserrat Fallback", sans-serif;
    font-weight:700;
    font-size:18px;
    line-height:1.4;
    color:#FFFFFF;
    margin:0;
}
.asgi-tiles__inner{
    max-width:1180px;
    margin:0 auto;
    padding:40px 24px 80px;
}
@media (max-width: 900px){
    .asgi-intro__title{font-size:48px;}
    .asgi-intro__subtitle{font-size:30px;}
    .asgi-intro__inner{padding:60px 16px 32px;}
    .asgi-tiles__inner{padding:32px 16px 60px;}
    .asgi-hero{height:280px;}
}

/* Responsive */
@media (max-width: 900px){
    .asg-venue-row{grid-template-columns:1fr;}
    .asg-venue-row__image{height:240px;}
    .asg-stats-row{grid-template-columns:1fr;}
    .asg-actions__buttons{width:100%;}
    .asg-other-games__grid{grid-template-columns:1fr !important;}
    .asg-other-games[data-layout="3-2"] .asg-tile{grid-column:1 !important;}
    .asg-tile{height:auto;min-height:380px;}
    .asg-tile__image{min-height:200px;}
    .asg-intro__title{font-size:48px;}
    .asg-intro__subhead{font-size:30px;}
    .asg-other-games__heading{font-size:48px;}
    .asg-competitions__title{font-size:30px;}
}
@media (max-width: 600px){
    .asg-section__inner{padding:60px 16px;}
    .asg-section--intro .asg-section__inner{padding-top:80px;}
    .asg-hero{height:280px;}
    .asg-stat{padding:20px 20px;}
    .asg-stat--count{flex-direction:column;text-align:center;gap:8px;}
    .asg-stat--count .asg-stat__label{margin-right:0;} /* drop the desktop nudge when stacked + centred */
    .asg-stat--count .asg-stat__big{left:0;} /* drop the number nudge when stacked + centred */
    .asg-stat__big{font-size:56px;}
}
/*# sourceURL=allstars-game-template-inline-css */