/* ============================================================
   BIG GAME WEEK - SITE STYLES

   This file is loaded on every page by the "Big Game Week Core"
   plugin. Each block below is numbered and labelled, so you can
   change one thing without hunting through the rest.

   Colours live in block 1. Change a value there and it updates
   everywhere that uses it.
   ============================================================ */

/* ---- 1. BRAND COLOURS ------------------------------------- */
:root{
  --bgw-red:#EC2A26;          /* buttons, links, accents        */
  --bgw-red-hover:#B81E14;    /* button hover                   */
  --bgw-night:#15131B;        /* header, dark sections          */
  --bgw-deep:#0B0A0E;         /* utility bar, footer            */
  --bgw-plum:#453F5E;         /* featured + FAQ sections        */
  --bgw-light:#F7F6FA;        /* light section background       */
  --bgw-ink:#141219;          /* headings on light background   */
  --bgw-line-light:#E4E1EC;   /* borders on light background    */
  --bgw-line-dark:rgba(255,255,255,.10);
  --bgw-radius:10px;          /* card corner rounding           */
}

/* ---- 2. STICKY HEADER ------------------------------------- */
/* Delete this block if you do not want the header to follow the
   page as the visitor scrolls. */
.bgw-sticky{ position:sticky; top:0; z-index:99; }
.admin-bar .bgw-sticky{ top:32px; }
@media (max-width:782px){ .admin-bar .bgw-sticky{ top:46px; } }

/* ---- 3. EVENT CARD ---------------------------------------- */
/* The white cards in "Featured This Week". */
.bgw-card{ transition:transform .28s ease, box-shadow .28s ease; }
.bgw-card:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 60px rgba(0,0,0,.34) !important;
}

/* Poster image sits under the two badges. */
.bgw-card-media{ position:relative; overflow:hidden; }
.bgw-card-media img{
  display:block; width:100%; height:auto;
  transition:transform .5s ease;
}
.bgw-card:hover .bgw-card-media img{ transform:scale(1.04); }

/* Date badge (left) and time badge (right), laid over the poster. */
.bgw-card-pills{
  position:absolute; top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:16px; pointer-events:none; z-index:2;
}

/* ---- 4. CATEGORY TILE ------------------------------------- */
/* The six tiles in "Browse by Experience". */
.bgw-cat{ transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.bgw-cat:hover{
  border-color:var(--bgw-red) !important;
  box-shadow:0 18px 36px rgba(236,42,38,.14);
  transform:translateY(-4px);
}

/* ---- 5. DAY TILE ------------------------------------------ */
/* The seven day tiles in "Week at a Glance". */
.bgw-day{ transition:background-color .25s ease, border-color .25s ease, transform .25s ease; }
.bgw-day:hover{
  background-color:rgba(236,42,38,.14) !important;
  border-color:rgba(236,42,38,.55) !important;
  transform:translateY(-4px);
}

/* ---- 6. FAQ ACCORDION ------------------------------------- */
.bgw-faq .elementor-accordion .elementor-accordion-item{
  border:1px solid rgba(255,255,255,.14);
  border-radius:8px;
  margin-bottom:12px;
  overflow:hidden;
  background:rgba(255,255,255,.05);
}
.bgw-faq .elementor-tab-title{ transition:background-color .2s ease; }
.bgw-faq .elementor-tab-title:hover{ background-color:rgba(255,255,255,.09); }

/* ---- 7. SUBSCRIBE BOX ------------------------------------- */
/* Used in the newsletter section and again in the footer. */
.bgw-subscribe form{ display:flex; gap:10px; flex-wrap:wrap; align-items:stretch; }
.bgw-subscribe input[type=email]{
  flex:1 1 220px; min-width:0;
  padding:16px 18px; border-radius:4px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.07); color:#fff;
  font:400 15px/1.2 Manrope,system-ui,sans-serif;
}
.bgw-subscribe input[type=email]::placeholder{ color:#8F8AA0; }
.bgw-subscribe input[type=email]:focus{ outline:2px solid var(--bgw-red); outline-offset:1px; }
.bgw-subscribe button{
  flex:0 0 auto;
  padding:16px 26px; border:0; border-radius:4px; cursor:pointer;
  background:var(--bgw-red); color:#fff;
  font:600 12px/1 Sora,system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase;
  transition:background-color .2s ease;
}
.bgw-subscribe button:hover{ background:var(--bgw-red-hover); }

/* Footer version is a little tighter. */
.hfe-footer .bgw-subscribe input[type=email]{ flex:1 1 140px; padding:13px 14px; font-size:14px; }
.hfe-footer .bgw-subscribe button{ padding:13px 18px; font-size:11px; }

/* ---- 8. SMALL TIDY-UPS ------------------------------------ */
.bgw-utilitybar .elementor-icon-list-items{ margin:0; }
.bgw-statbar > .e-con-inner > *:last-child,
.bgw-statbar > *:last-child{ border-right:0 !important; }

/* ---- 9. KEYBOARD FOCUS ------------------------------------ */
/* Visible outline for people navigating with the Tab key. */
a:focus-visible, button:focus-visible, input:focus-visible,
.bgw-cat:focus-visible, .bgw-day:focus-visible{
  outline:2px solid var(--bgw-red);
  outline-offset:3px;
  border-radius:3px;
}

/* ---- 10. MOTION ------------------------------------------- */
/* Turned off for visitors who ask for reduced motion. */
@media (prefers-reduced-motion: reduce){
  .bgw-card, .bgw-cat, .bgw-day, .bgw-card-media img{
    transition:none !important;
  }
  .bgw-card:hover, .bgw-cat:hover, .bgw-day:hover,
  .bgw-card:hover .bgw-card-media img{
    transform:none !important;
  }
}

/* ---- 11. MOBILE & TABLET MENU ------------------------------
   Below 1025px the navigation collapses into a hamburger.

   Why these rules exist: the menu plugin shows the hamburger from
   1024px down, but only turns the drop-down panel into an overlay
   below 768px. Between those two widths the menu stayed in the
   header row, stole ~560px and pushed the page sideways. The rules
   below anchor the panel to the header at every width under 1025px,
   so it always opens as a full-width overlay.
   ------------------------------------------------------------ */
@media (max-width:1024px){

  /* Make the header itself the anchor for the drop-down panel. */
  .bgw-header{ position:relative; }
  .bgw-header .e-con-inner,
  .bgw-header .e-con.e-child,
  .bgw-header .elementor-widget-navigation-menu,
  .bgw-header .elementor-widget-navigation-menu > .elementor-widget-container{
    position:static;
  }

  /* The panel: full width, directly under the header. */
  .bgw-header nav.hfe-nav-menu__layout-horizontal{
    position:absolute;
    top:100%; left:0; right:0;
    width:auto;
    background:var(--bgw-night);
    border-top:1px solid rgba(255,255,255,.08);
    box-shadow:0 26px 44px rgba(0,0,0,.5);
    padding:4px 0 8px;
    max-height:calc(100vh - 100%);
    overflow-y:auto;
    z-index:120;
  }

  /* Hamburger sits at the right end of the header row. */
  .bgw-header .hfe-nav-menu__toggle{ margin-left:auto; }

  /* One comfortable tap target per link. */
  .bgw-header nav.hfe-nav-menu__layout-horizontal .menu-item a.hfe-menu-item,
  .bgw-header nav.hfe-nav-menu__layout-horizontal .menu-item a.hfe-sub-menu-item{
    padding:15px 22px !important;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .bgw-header nav.hfe-nav-menu__layout-horizontal > ul > .menu-item:last-child > a.hfe-menu-item{
    border-bottom:0;
  }

  /* Sub-menu (FAQ under Blogs) indents instead of floating. */
  .bgw-header nav.hfe-nav-menu__layout-horizontal .sub-menu{
    background:rgba(255,255,255,.04);
    box-shadow:none;
  }
  .bgw-header nav.hfe-nav-menu__layout-horizontal .sub-menu a.hfe-sub-menu-item{
    padding-left:38px !important;
  }
}

/* ---- 12. HEADER ROW ----------------------------------------
   Keeps logo, call button, menu and CTA on one line. */
.bgw-header .e-con-inner > .e-con{ flex-wrap:nowrap; }
.bgw-logo img{ display:block; }

/* ---- 13. YOUR OWN RULES ----------------------------------- */
/* Add anything new below this line. */