/*=== Accent token ===*/
/* See the same block in default.css -- this is the futsal red. */
:root {
  --accent: #d20a0a;
}

/*=== Text color ===*/
h3 a:hover,
a,
.secotionTitle h2 span,
a.link:hover,
.processArea p
.tabCommon.singleTab .tab-pane h4,
.tabCommon.singleTab .tab-pane .blogCommnets .media-body .btn-link,
.list-address li a:hover,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li.active a,
.navbar-default .navbar-nav > li.active a:hover,
.navbar-default .navbar-nav > li.open > a,
.navbar-default .navbar-nav > li.open > a:hover,
.navbar-default .navbar-nav > li.open > a:focus,
.navbar-nav li.dropdown.megaDropMenu .dropdown-menu .list-unstyled li a:hover,
.navbar-nav li.dropdown.singleDrop .dropdown-menu li a:hover,
.navbarWhite .navbar-default .navbar-nav > li > a:hover,
.navbarWhite .navbar-default .navbar-nav > li.active > a,
.navbarWhite .navbar-btn,
.list-contact li a:hover,
.useLink ul li a:hover,
.copyRightText p a:hover,
.footerWhite .useLink ul li a:hover,
.footerWhite .copyRightText p a:hover,
.banerInfo .input-group-addon i.icon-listy,
.articleContent .caption h4 a,
.thingsMask h2 i,
.captionItem li i,
.captionItem li a,
.captionItem li a:hover,
.thingsBox:hover .thingsCaption h2,
.listCategory li a:hover,
.figureBody h2 i.fa,
.figureBody p a:hover,
.figureBody h3,
.isotopeSelector article:hover .figureBody p a,
.categoryItem .list-unstyled li a:hover,
.servicesIcon i.icon-listy,
.resultBar .list-inline li a:hover,
.resultBar .list-inline li.active a,
.likeCount i.fa,
.list-tag li a,
.list-tag li a:hover,
.gallery-section ul#filters li.active a,
.gallery-section ul#filters li:hover a,
.businessLink ul.list-inline li a:hover,
.signUpFormArea .priceTableTitle p a,
.formSection label a,
.formSection p a,
.priceInfo .priceShorting > li ul li.active > i,
.priceInfo .priceShorting > li.active > i,
.sidebarInner .categoryList li a:hover,
.blogContent .caption h4 a,
.blogInner .caption h4 a,
.profileIntro .form-group button.btn-primary,
.profileUserInfo h5 span,
.listingsInfo li:last-child h3 i.fa,
.listingsInfo li:last-child .category,
.listingsInfo li:last-child p .likeArea i.fa
.primaryColor,
.messageCommon.recentMessage .messageInfo small .dayTime,
.messageCommon.recentMessage .messageTime,
.panel-card .panel-body .chartInfo h2,
.sidebarList li span a,
.user-profile-section .user-contact .list-contact li a:hover
.page-error-section h1,
.navbar-default .navbar-btn,
.navbar-default .navbar-btn:focus,
.navbar-default .navbar-btn:active,
.navbar-nav li.dropdown.singleDrop .dropdown-menu li .active,
.transparent-navbar.navbar-sticky .navbar-btn,
.page-error-section h1,
.primaryColor,
.listingsInfo li:last-child p .likeArea i.fa,
.marker-verified {
  color: #d20a0a;
}

/*=== Color Darken ===*/
.testimonial-slider .owl-item.active.center .testimonial-box:after {
  color: #8b0707;
}

/*=== Color Importang color ===*/
.searchSelectbox .sbOptions a:hover,
.dashboardPageTitle .sbOptions a:hover,
.dashboard-list-box .list-sort .sort-select .sbHolder .sbOptions li a:hover,
.contactSelect .sbOptions a:hover {
  color: #d20a0a !important;
}

/*=== Background color ===*/
::-moz-selection {
  background-color: #d20a0a;
}

::selection {
  background-color: #d20a0a;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.active,
.btn-primary:active,
.btn-secondary:focus,
.btn-secondary.active,
.btn-secondary:active,
.btn-primary.active.focus,
.btn-primary.active:focus,
.btn-primary.active:hover,
.btn-primary:active.focus,
.btn-primary:active:focus,
.btn-primary:active:hover,
.open > .dropdown-toggle.btn-primary.focus,
.open > .dropdown-toggle.btn-primary:focus,
.open > .dropdown-toggle.btn-primary:hover,
.backToTop,
.btn-theme, .btn-theme:focus, .btn-theme.active, .btn-theme:active, .btn-theme:hover,
.addon-form-style .form-group .btn-default,
.paginationCommon .pagination li a:hover,
.paginationCommon .pagination li.active a,
.paginationCommon .pagination li.active a:focus,
.paginationCommon .pagination li.active a:hover
.tabCommon.tabThree .nav-tabs li a:before,
.tabCommon.singleTab .nav-tabs li a:hover,
.tabCommon.singleTab .nav-tabs li.active a,
.modalCommon .modal-header,
.sticker,
.pagerArea > .pager li a,
.panel.loginPanel .panel-heading,
.count-down .simple_timer .timer-body-block .table-cell .tab-val,
.navbar-default .navbar-toggle,
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover,
.cart_btn a span,
.footerText .input-group-addon,
.copyRight .socialLink li a:hover,
.footerWhite .copyRight .socialLink li a:hover,
.callAction,
.interestContent:hover,
.thingsArea .carousel-control:hover,
.thingsArea .carousel-indicators li.active,
.filterProtfolio ul.filter > li > a:hover,
.filterProtfolio ul.filter > li.active > a,
.label-primary,
.testimonial-slider .owl-item.active.center .testimonial-box,
.testimonial-slider .owl-item.active.center .testimonial-box:before,
.priceBtn .btn-primary:hover, .priceBtn .btn-primary:active:focus, .priceBtn .btn-primary:active:hover,
.advancedSupport.active .btn-primary,
.sidebarInner.sidebarCategory .input-group-addon i.fa,
.blogContent .caption .socialLink li a:hover,
#blog-carousel-id .carousel-control:hover i.icon-listy,
.btn-toolbar .btn-default:active, .btn-toolbar .btn-default:hover, .btn-toolbar .btn-default:focus,
.btn-toolbar .open .btn-default:active, .btn-toolbar .open .btn-default:hover, .btn-toolbar .open .btn-default:focus,
.panel-card .panel-heading .label.label-primary,
.itmeName .iconBox,
.btn-panel.btn-group .btn-primary:hover, .btn-panel.btn-group .btn-primary.active,
.main-slider .owl-carousel .owl-controls .owl-nav .owl-prev:hover,
.main-slider .owl-carousel .owl-controls .owl-nav .owl-next:hover,
.banner-slick-slider .slide .common-inner a.btn,
.user-profile-section .verified-user,
.listing__form .btn-submit,
.advancedSupport.active .priceAmount,
.comments-media .media-body .btn-primary:hover,
.user-profile-section .user-profile .user-profile-content .verified-user,
.transparent-navbar.navbar-default .navbar-toggle .icon-bar,
.back {
  background-color: #d20a0a;
}

.thingsBox:hover .thingsMask,
.banner-slick-slider .slick-slider .slick-prev.slick-arrow,
.banner-slick-slider .slick-slider .slick-next.slick-arrow {
  background-color: rgba(210, 10, 10, 0.5);
}

/*=== Border color ===*/
.btn-theme,
.btn-theme:focus, .btn-theme.active, .btn-theme:active, .btn-theme:hover,
.paginationCommon .pagination li a:hover,
.paginationCommon .pagination li.active a, .paginationCommon .pagination li.active a:focus, .paginationCommon .pagination li.active a:hover,
.tabCommon.singleTab .nav-tabs li a:hover,
.tabCommon.singleTab .nav-tabs li.active a,
.navbar-default .navbar-toggle,
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover,
.navbarWhite .navbar-btn,
.footerText .form-control:focus,
.footerText .input-group-addon,
.copyRight .socialLink li a:hover,
.footerWhite .copyRight .socialLink li a:hover,
.interestContent:hover,
.thingsArea .carousel-control:hover,
.thingsArea .carousel-indicators li,
.filterProtfolio ul.filter > li > a:hover,
.filterProtfolio ul.filter > li.active > a,
.priceBtn .btn-primary:hover, .priceBtn .btn-primary:active:focus, .priceBtn .btn-primary:active:hover,
.advancedSupport.active,
.advancedSupport.active .btn-primary,
.advancedSupport.active .btn-primary:hover, .advancedSupport.active .btn-primary:active:focus, .advancedSupport.active .btn-primary:active:hover,
.blogContent .caption .socialLink li a:hover,
#blog-carousel-id .carousel-control:hover i.icon-listy,
.profileIntro .form-group button.btn-primary,
.imageUploader,
.btn-panel.btn-group .btn-primary:hover, .btn-panel.btn-group .btn-primary.active,
.main-slider .owl-carousel .owl-controls .owl-nav .owl-prev:hover,
.main-slider .owl-carousel .owl-controls .owl-nav .owl-next:hover,
.navbar-default .navbar-btn,
.navbar-default .navbar-btn:focus,
.navbar-default .navbar-btn:active,
.navbar-default .navbar-btn:hover,
.transparent-navbar.navbar-sticky .navbar-btn {
  border-color: #d20a0a;
}

.bg-search-white {
  border: 2px solid rgba(210, 10, 10, 0.3);
}

@media (min-width: 768px) {
  .transparent-navbar.navbar-default .navbar-btn:hover {
    color: #d20a0a;
  }
}

.logo-svg .path-1,
.navbar.navbar-default.transparent-navbar.navbar-sticky .logo-svg .path-1 {
  fill: #d20a0a;
}

/*=== FutsalVenues additions ===*/
/* The four selectors below carry the blue accent in style.css but are NOT
   re-declared by the stock colour files, so they leak through a palette swap.
   style.css is shared by every site and must not be edited -- override here. */
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary.active,
.btn-secondary:active {
  background-color: #d20a0a;
}

/* Loading spinner. Keeps a gradient because the original does
   (blue -> cyan); recoloured to red -> dark red. */
.loader-target .loader-target-main,
.loader-target .loader-target-inner {
  background: linear-gradient(to right, #d20a0a, #8b0707);
}


/* ==========================================================================
   LAYERED HERO  --  FutsalVenues only
   --------------------------------------------------------------------------
   Caption ("Choose your venues") and the search panel both sit ON the slider
   image instead of the panel dropping onto the pale strip beneath it.

   Loaded via "site.themeColorCss" (set per profile) and after style.css, so
   equal-specificity selectors win on load order without !important. Nothing
   here can reach TennisVenues, RacquetVenues, NZ or PL.

   style.css pulls .bg-search up by -170px but the panel still straddles the
   slide's bottom edge. Rather than tune that number, the whole search section
   is lifted by a known amount and .bg-search's own margins are zeroed, so the
   geometry follows from one value.
   ========================================================================== */

/*=== Slide ===*/
/* Taller than the stock 510/538 to give the caption and panel room to coexist. */
.main-slider .slide {
  position: relative; /* containing block for the scrim */
  height: 560px;
}

@media (min-width: 992px) {
  .main-slider .slide {
    height: 640px;
  }
}

/* Photos vary wildly in exposure; this scrim keeps the white caption and the
   panel's drop shadow legible on any of them. Kept even top-to-bottom so the
   slide ends on a clean edge against the white page. */
.main-slider .slide::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.32) 45%, rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none;
  z-index: 1;
}

/*=== Caption ===*/
/* Above the scrim, and centred rather than style.css's left-aligned position. */
.main-slider .slide > .container {
  position: relative;
  width: 100%;
  z-index: 2;
}

.main-slider .slide-inner1,
.main-slider .slide-inner2,
.main-slider .slide-inner4 {
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
  top: 44%;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}

/* 47%, down from 38% via 43%. With the panel lifted further up the slide
   (below), the caption and the search box read as one block instead of a
   headline stranded above a panel. On a 640px slide that is the caption's
   centre moving 243px -> 301px.
   Roughly the floor: the caption is centred on this figure, so much past 50%
   and the headline starts sitting below the middle of the photo while the
   panel pushes into the bottom edge of the slide. */
@media (min-width: 768px) {
  .main-slider .slide-inner1,
  .main-slider .slide-inner2,
  .main-slider .slide-inner4 {
    left: 0;
    top: 47%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
  }
}

/* Caption type.
   Deliberately still Poppins. A display face here would be the obvious move and
   the wrong one -- Muli already sets the body and Poppins the headings, and a
   third family on the same screen is most of what makes a site look assembled
   rather than designed. The brand reads better if the hero is the SAME voice as
   the section headings, just louder. So: same font, different treatment.
   What changes is the treatment. Uppercase at weight 500 with default tracking
   is the stock template look; sentence case at 600 with the tracking pulled in
   is the same words reading as a headline someone chose. Negative tracking only
   works above ~40px, hence the size split -- the mobile rule inherits the
   theme's 20px and is left alone. */
/* Selected through ".slide" to outrank style.css's own
   ".main-slider .common-inner .h1", which repeats font-size in three separate
   breakpoints. Matching its specificity meant winning some declarations and
   losing others depending on which of its blocks was live at that width; one
   extra class makes the whole rule win at every width. */
@media (min-width: 768px) {
  .main-slider .slide .common-inner .h1 {
    font-weight: 600;
    font-size: 54px;
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-transform: none;
    /* Lighter than the stock shadow: there is already a scrim over the photo
       (above), and stacking a hard shadow on top of it muddies the edges. */
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
  }
}

/*=== Search panel ===*/
/* The lift MUST be scoped with ".main-slider ~". The search-results page
   (/keyword-search) reuses the identical "bg-light pr searchPadding" classes
   but has no slider above it, so an unscoped rule drags that panel up under
   the header and out of sight. The sibling combinator matches only where a
   slider actually precedes the section, i.e. the home page.
   .bg-light would otherwise paint a pale strip behind the lifted section. */
.main-slider ~ section.bg-light.searchPadding {
  background-color: transparent;
  /* Raised in stages -- -190, -225, -248, now -272 -- while the caption came
     down from 38% to 47%. Between them the gap from the headline's baseline to
     the top of the panel goes 132px -> 76px -> ~34px: tight enough that the two
     read as a single unit, with just enough air that the panel is not touching
     the type. Going much further would need the caption's own bottom margin
     taken out too. */
  margin-top: -272px;
  padding-top: 0;
  padding-bottom: 70px;
  position: relative;
  z-index: 10;
}

/* On phones the panel stacks its fields and gets much taller, so it needs a
   smaller lift to stay on the image. */
/* Mobile tightens by the same proportion. The caption is 20px here rather than
   54px, so it needs far less clearance than the desktop figure would give it. */
@media (max-width: 767px) {
  .main-slider ~ section.bg-light.searchPadding {
    margin-top: -152px;
    padding-bottom: 40px;
  }
}

/* Pages with NO slider (e.g. /keyword-search) show the panel in its own band.
   search-results/view.jsp hard-codes style="padding-top:10px" on the section
   and style="padding-bottom:100px" on the container, so the panel sits high
   in that band instead of centred. Inline styles need !important to beat. */
section.bg-light.searchPadding {
  padding-top: 45px !important;
}

section.bg-light.searchPadding > .container {
  padding-bottom: 45px !important;
}

/* ...but the home page still needs the panel flush against the hero lift.
   Higher specificity AND !important, to outrank the two rules above. */
.main-slider ~ section.bg-light.searchPadding {
  padding-top: 0 !important;
}

.main-slider ~ section.bg-light.searchPadding > .container {
  padding-bottom: 0 !important;
}

/* White card, not the stock slate #373c48. */
.bg-search {
  margin: 0 auto;
  max-width: 900px;
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  padding: 10px;
}

@media (min-width: 768px) {
  .bg-search {
    padding: 10px;
  }
}

/* Input and button on one row, input taking the slack. style.css sets the
   last form-group to width:100%, which would starve the input under flex. */
@media (min-width: 768px) {
  .bg-search .form-inline {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  .bg-search .form-inline .form-group.autocomplete {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    width: auto;
    margin-right: 8px;
  }

  .bg-search .form-inline .form-group:last-child {
    -ms-flex: 0 0 165px;
        flex: 0 0 165px;
    width: 165px;
  }

  /* style.css sets ".bg-search .form-group button { height:50px }". Matching
     that on load order alone proved fragile, so out-specify it outright with
     .form-inline + .btn. min-height guards against the theme's padding-based
     sizing winning back the height. */
  .bg-search .form-inline .form-group button.btn {
    height: 60px;
    min-height: 60px;
    font-size: 16px;
  }
}

/* Magnifier sits inside the field, as on the mock. */
.bg-search .form-group.autocomplete {
  position: relative;
}

.bg-search .form-group.autocomplete::before {
  content: "\f002";
  font-family: FontAwesome;
  position: absolute;
  left: 18px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  color: #9a9a9a;
  font-size: 17px;
  z-index: 2;
  pointer-events: none;
}

.bg-search .form-group.autocomplete input {
  height: 60px;
  padding-left: 48px;
  font-size: 16px;
  border: none;
  box-shadow: none;
  background-color: #ffffff;
}


/* ==========================================================================
   FEATURED VENUES  --  FutsalVenues only
   ========================================================================== */

/* Stock .container is a FIXED width per breakpoint (750/970/1170px), so on a
   wide screen the grid sits in a narrow column with big empty margins. Going
   fluid means the cards grow with the window instead of just getting thinner
   when the row count goes up.
   Must start at the same 992px breakpoint as the 4-up rule below: gating this
   at 1200px left every 992-1199px screen with 4 narrow cards in a 970px
   container -- smaller cards, identical white space. */
/* Wider than the stock 1170 container so the row reaches further across the
   page, but NOT so the cards grow -- the extra width goes into the gutters
   below, not into the cards. They end up ~358px against 330px, which is as much
   as "slightly bigger" should mean.
   Nowhere near the 94%/1800px this used to be: a card grows to 1.25 on hover
   and has to do that without touching its neighbours or leaving the page, and
   at full bleed there was nowhere for it to go. */
@media (min-width: 992px) {
  .filterProtfolio > .container {
    width: 96%;
    max-width: 1320px;
  }
}

/* The wider container is spent here rather than on the cards. A gutter this
   size also gives the hover somewhere to happen: at 1.25 a card reaches ~45px
   past its cell, so 56px of gutter keeps it clear of the shrinking card beside
   it instead of landing on top of it.
   Futsal-only, like the container above -- the shared 30px in custom.css.jsp
   stays right for the sites still on a 1170 container. */
/* ".row.isotopeContainer", not ".isotopeContainer": the grid's own gap lives in
   custom.css.jsp, which is an inline <style> and therefore sits AFTER this file
   in the cascade. At equal specificity it would win on order alone, so the
   extra class (the container carries Bootstrap's .row too) is what settles it.
   Same reason the caption rules below are selected through .slide. */
@media (min-width: 992px) {
  .filterProtfolio .row.isotopeContainer {
    gap: 56px;
  }
}

/* 4-up at >=1200px used to be set here. Now 3-up at every width, which is what
   the other sites do: the column count lives in custom.css.jsp, which lays the
   section out as a grid so a card can expand to a 2x2 block on hover. Four
   narrow columns left too little room for that to read as anything.
   Nothing to override here any more -- the grid sizes its own tracks. */

/* Taller than the 200px that 4-up needed: the cards are ~30% wider now, so the
   picture can take more height without stretching the 370x250 source (which
   object-fit crops rather than distorts anyway). Keeps the section's overall
   footprint about what it was at 4-up. Inline styles need !important. */
.filterProtfolio .isotopeContainer figure img {
  height: 230px !important;
  -o-object-fit: cover;
     object-fit: cover;
}

/* Section heading. The page's own <style> block sits later in the document
   than this file, so a bare ".page-header h1" would lose the cascade at equal
   specificity -- the extra .filterProtfolio class is what wins it. */
.filterProtfolio .page-header h1 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: #1f1f1f;
  letter-spacing: -0.01em;
}

.filterProtfolio .page-header h1 small {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: #7a7a7a;
  margin-top: 10px;
}

/* The heading sat almost on top of the first row of cards. home/view.jsp puts
   style="margin-bottom:20px" inline on this div, so !important is the only way
   to open the gap up from here. */
.filterProtfolio .page-header {
  margin-bottom: 80px !important;
}

/* ==========================================================================
   CITY PAGE HEADER  --  FutsalVenues only
   --------------------------------------------------------------------------
   The "Futsal Courts In <city>" band on /futsal-courts-in-<city>, which is the
   only place "site.slider2" is used (location-venue-list.jsp).

   The crop is a function of band height, not of the image: background-size is
   cover, so the photo is scaled to the viewport's width and whatever will not
   fit in the band's height is cut off. On futsal-slider-2 (1920x651) the goal
   runs from 11% to 67% of the frame, so nothing shorter than ~56% of the scaled
   height can show it whole, however it is positioned -- and a band sized to
   exactly that leaves the crossbar touching the top edge, which reads as a crop
   even though nothing is actually cut. ~70% is what buys clear air at both ends.

   Hence vw rather than px. A fixed depth is a different crop at every window
   width -- 120px showed the net's feet on a laptop and cut them off on a wide
   monitor -- whereas a depth proportional to the width holds one crop across all
   of them. 10.4vw plus the ~58px title line holds the band at ~70% of the scaled
   photo from 1440px to 2560px. Percentages are of the parent's WIDTH for
   padding, so vw is what makes the intent explicit here.
   ========================================================================== */
.pageTitleSection.bg-image {
  padding: 10.4vw 0;
  /* Offset down the frame, not anchored to the top as style.css has it: the band
     is a window onto part of the photo, and at "top" that window holds a lot of
     ceiling and stops just above the goal line. 16% spends the crop on the court
     instead, and leaves ~6% of frame above the crossbar so the top of the net is
     clearly inside the band rather than grazing its edge. */
  background-position: center 16%;
}

/* Back to pixels on a phone: 9.2vw is only ~35px at 375px wide, which crowds the
   title against the edges of the band. Nothing is lost by fixing the depth here
   -- at this width the band is deeper than the photo scaled to fit it, so cover
   scales by height instead and the frame is already whole top to bottom. */
@media (max-width: 767px) {
  .pageTitleSection.bg-image {
    padding: 70px 0;
  }
}

/* Scrim. The title is white on an uncontrolled photograph -- futsal courts are
   shot under every kind of lighting -- and "text-shadow" in the markup is a
   class that is never defined anywhere, so until now the text had nothing
   behind it at all.
   Weighted to the bottom rather than flat: the top of the frame is where the
   header sits, and keeping that end lighter stops the band reading as a black
   bar under the navigation. */
.pageTitleSection.bg-image::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0.62) 100%);
  pointer-events: none;
  z-index: 1;
}

/* .container is a plain static block, so it paints under the scrim. Lifting it
   into the same stacking context puts the title back on top. */
.pageTitleSection.bg-image > .container {
  position: relative;
  z-index: 2;
}

/* Title. location-venue-list.jsp carries font-family / font-size / weight as an
   INLINE style attribute, which no stylesheet can outrank without !important --
   hence the flags on exactly those three properties and nowhere else.
   Tightened tracking and a real shadow: the shadow is doing the legibility work
   the scrim cannot, on a photo with bright highlights (nets, ceiling lights). */
.pageTitleSection.bg-image .pageTitle h1 {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: 52px !important;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.45), 0 8px 28px rgba(0, 0, 0, 0.35);
}

@media (max-width: 991px) {
  .pageTitleSection.bg-image .pageTitle h1 {
    font-size: 40px !important;
  }
}

@media (max-width: 767px) {
  .pageTitleSection.bg-image .pageTitle h1 {
    font-size: 30px !important;
  }
}

/* NOTE: no accent rule under this title. There was a short red one here, on the
   grounds that the band needed some structure under a single line of text -- but
   it landed in the middle of the photo, among the court markings, and read as
   another line painted on the floor. The photograph is the structure. */

/* ==========================================================================
   SITE SWITCHER ACCENT  --  FutsalVenues only
   --------------------------------------------------------------------------
   custom.css.jsp gives the icon (the 2x2 grid) a neutral grey default. That
   file is an inline <style> included from head.jsp and therefore lands AFTER
   this stylesheet in the cascade, so a bare ".siteSwitcherToggle" here would
   lose. The extra .siteSwitcher class out-specifies it.
   This one declaration is the whole per-brand story. The hover behaviour lives
   in custom.css.jsp and needs no values here: the quarter turn is colourless,
   and the squares fill with currentColor, so they pick this red up on their own.
   ========================================================================== */
.siteSwitcher .siteSwitcherToggle {
  color: #d20a0a;
}

/* NOTE: the switcher icon's vertical position is NOT set here. It is derived
   per-logo in custom.css.jsp from that logo's cap line and baseline, so it is
   correct on every site rather than tuned for this one. Adding a "top" nudge
   here would fight that calculation. */

/* ==========================================================================
   Featured venue cards -- no dark veil on hover.

   style.css fades a 75% black overlay in over the photo when a card is hovered
   (".isotopeSelector .overlay" + "figure:hover .overlay"). That was the Listty
   theme's original hover treatment, written before this site had one of its own.
   This brand uses the GSAP scale/lift/parallax effect in custom.js.jsp instead,
   and running both at once just makes the photo muddy while it animates.

   Only the veil goes. The .overlay element itself stays and still fades in,
   because it carries the "Featured Venue" badge -- which is a solid red pill
   and reads fine straight on a photo.

   Deliberately scoped to this brand: the tennis and racquet sites keep the
   original darkening, since default.css does not override this.
   ========================================================================== */
.isotopeSelector .overlay {
  background-color: transparent;
}