/* ==========================================================================
   Blue Crow — post-handover fixes
   Loaded on every page. Nothing here overrides intentional design; each block
   repairs a defect found in the delivered site.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Rescued rules
   The page's custom CSS block begins with a pasted chat reply ("Replace all
   the previous ... CSS with this:" plus a ```css fence) and contains an
   unclosed @media. The browser recovers by discarding the first rule and
   everything after the unclosed block - 10 of 19 rules never applied.
   These are the dropped rules, restored.
   -------------------------------------------------------------------------- */

.bcsg-news-grid .vc_grid-item-mini {
  position: relative;
  overflow: hidden;
}

@media only screen and (max-width: 767px) {
  .mobile-center-row { display: none !important; }
}

#numbers {
  padding-top: 70px !important;
  padding-bottom: 35px !important;
  background-color: #f3f3f3 !important;
  background-size: auto 62% !important;
  background-position: right bottom !important;
  background-repeat: no-repeat !important;
}

/* The delivered block also set `.vntd-special-heading { padding-right:150px }`
   to clear a background image that the section does not actually have; it only
   pushed the heading 75px left of the icon row, so it is left out. */

@media (max-width: 1100px) {
  #numbers { background-size: auto 48% !important; }
}

@media (max-width: 767px) {
  #numbers {
    padding: 55px 15px 35px !important;
    background-image: none !important;
  }
}

/* NOTE: two further rescued rules are deliberately NOT enabled here:
     .player-card     { aspect-ratio: 1 / 1; border-radius: 10px; }
     .player-card img { aspect-ratio: 1 / 1; object-fit: cover; }
   They would crop the pipeline cards from ~471px tall to ~231px (square).
   That is a design decision, not a defect - enable if that was the intent. */


/* --------------------------------------------------------------------------
   2. News hover overlay, applied site-wide
   The navy hover overlay was defined only in the homepage's inline CSS, so the
   identical news grid on Teams and Players had no hover state.
   -------------------------------------------------------------------------- */

.bcsg-news-grid .vc_gitem-zone-a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(5, 24, 67, 0);
  pointer-events: none;
  transition: background .3s ease;
}

.bcsg-news-grid .vc_grid-item:hover .vc_gitem-zone-a::after {
  background: rgba(5, 24, 67, .68);
}

.bcsg-news-grid .vc_gitem-zone-b { z-index: 3 !important; }

.bcsg-news-grid .vc_gitem-post-data-source-post_title h4,
.bcsg-news-grid .vc_gitem-post-data-source-post_title a {
  color: #fff !important;
  font-size: 25px !important;
  line-height: 1.15 !important;
}


/* --------------------------------------------------------------------------
   3. Same overlay for the news archive listing
   The archive uses the theme's native post markup rather than the WPBakery
   grid, so it had no hover treatment at all. (The theme's `mp-gallery` class
   is renamed `bcsg-gallery` by fix_site.py so the lightbox does not bind.)
   -------------------------------------------------------------------------- */

.single_item.bcsg-gallery { position: relative; overflow: hidden; }

.single_item.bcsg-gallery > a {
  display: block;
  position: relative;
  overflow: hidden;
}

.single_item.bcsg-gallery > a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(5, 24, 67, 0);
  pointer-events: none;
  transition: background .3s ease;
}

.single_item.bcsg-gallery:hover > a::after,
.blog-head:hover .single_item.bcsg-gallery > a::after {
  background: rgba(5, 24, 67, .68);
}

.single_item.bcsg-gallery > a img,
.single_item.bcsg-gallery > img {
  display: block;
  width: 100%;
  transition: transform .45s ease;
}

.single_item.bcsg-gallery:hover > a img { transform: scale(1.04); }


/* --------------------------------------------------------------------------
   4. Equal-height player pipeline cards
   The hoverboxes are inline-block, so each card's height followed its own text
   (471 / 448 / 415px) even though the columns holding them are all equal.
   Make the card fill its column instead.
   -------------------------------------------------------------------------- */

.player-card > .vc_column-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.player-card > .vc_column-inner > .wpb_wrapper,
.player-card .vc-hoverbox-wrapper {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
}

.player-card .vc-hoverbox {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
}

.player-card .vc-hoverbox-inner {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
}

.player-card .vc-hoverbox-block {
  width: 100%;
  height: 100%;
}


/* --------------------------------------------------------------------------
   5. Navigation: the current page is accented, on every page
   The theme only colours `.current_page_item`, which WordPress sets for
   Pages. The News archive and the articles carry `.current-menu-item`
   alone, so News never lit up there. "The Thesis" is a custom link to
   #thesis that WordPress mis-flagged as the home item; the stale classes
   are removed in the markup (both menu copies), so the rule can be honest.
   -------------------------------------------------------------------------- */

#navigation li.menu-item > a,
.nav-menu li.menu-item > a,
.menu li.menu-item > a {
  color: #0b1f6d;
}

#navigation li.current-menu-item > a,
.nav-menu li.current-menu-item > a,
.menu li.current-menu-item > a,
#navigation li.menu-item > a:hover,
.nav-menu li.menu-item > a:hover,
.menu li.menu-item > a:hover {
  color: #d71818;
}


/* --------------------------------------------------------------------------
   6. Non-links should not look or behave like links
   Author bylines and decorative feature-box icons shipped with href="" (they
   pointed at the site root), so clicking them reloaded the page.
   -------------------------------------------------------------------------- */

a.post-item:not([href]) {
  cursor: default;
  pointer-events: none;
}

a.box-icon:not([href]) { cursor: default; }


/* --------------------------------------------------------------------------
   7. Logo carousels: continuous marquee
   Delivered as Owl Carousel v1 with autoplay 6000ms - one 700ms hop every six
   seconds, which reads as static. Owl is bypassed (fix_site.py renames the
   class) and the duplicated item run scrolls continuously. Pauses on hover;
   honours prefers-reduced-motion.
   -------------------------------------------------------------------------- */

.bcsg-marquee {
  overflow: hidden;
  width: 100%;
  /* The theme gives .client-logos a fixed 100px height and centred the old
     carousel items on it (top:48%; translateY(-50%)), so the 158px logos
     overhung the band evenly. Reproduce that: let the box grow to the logo
     height and pull it back with negative margins. */
  margin: calc((100px - var(--bcsg-img, 158px)) / 2) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.bcsg-marquee-track {
  display: flex;
  width: max-content;
  animation: bcsg-marquee calc(var(--bcsg-n, 7) * 3.2s) linear infinite;
  will-change: transform;
}

.bcsg-marquee:hover .bcsg-marquee-track { animation-play-state: paused; }

.bcsg-marquee-group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.client-logos:has(> .bcsg-marquee) { height: auto; }

.bcsg-marquee .item {
  flex: 0 0 174px;
  width: 174px;
  height: var(--bcsg-img, 158px);
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.bcsg-marquee .item img {
  display: block;
  max-width: 100%;
  max-height: 200px;
  height: auto;
}

@keyframes bcsg-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 767px) {
  .bcsg-marquee { --bcsg-img: 124px; }
  .bcsg-marquee .item { flex-basis: 140px; width: 140px; }
}

@media (prefers-reduced-motion: reduce) {
  .bcsg-marquee-track { animation: none; }
  .bcsg-marquee { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .bcsg-marquee-group[aria-hidden] { display: none; }
}


/* --------------------------------------------------------------------------
   8. Phones: rows whose content is hidden should not leave an orphan heading
   The delivered CSS hides five rows on phones (.mobile-center-row). One of
   them leaves a section heading with nothing under it:
     "A proven player-first development pipeline"  (vc_custom_1789342259873)
     "150 players. 5 teams. 2 affiliate clubs."    (vc_custom_1788895718392)
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {
  .vc_row.vc_custom_1788895718392 { display: none !important; }
}
/* (vc_custom_1789342259873, the pipeline heading, is shown again since
   section 14 brings the player cards back on phones.) */


/* --------------------------------------------------------------------------
   9. Comments are switched off
   The reply form, comment counts and the "Recent Comments" widget are removed
   from the markup by fix_site.py; this hides anything a theme template might
   still print for them.
   -------------------------------------------------------------------------- */

#respond, .comment-respond, .comments-area, #comments, .commentlist,
.wp-block-latest-comments, a.post-item[href$="#comments"] { display: none !important; }


/* --------------------------------------------------------------------------
   10. Stats cards are the same size
   The four "fact" boxes under "Positioned for the future of soccer" are
   inline blocks sized by their own caption, so the one with a four-line
   caption was 28px taller than the rest. fix_site.py flags the row as
   equal-height; this makes each box fill its column.
   -------------------------------------------------------------------------- */

.bcsg-facts-row > .wpb_column > .vc_column-inner,
.bcsg-facts-row > .wpb_column > .vc_column-inner > .wpb_wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
}

.bcsg-facts-row .fact {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 230px;
}


/* --------------------------------------------------------------------------
   11. Contact card
   Replaces the Contact Form 7 form (no backend in the static build) and the
   address block beneath it, whose light-grey text was styled for a dark
   section and was unreadable on the white page.
   -------------------------------------------------------------------------- */

.bcsg-contact {
  max-width: 770px;
  margin: 60px auto 80px;
  padding: 56px 40px;
  background: #fafafa;
  border: 1px solid #eeeeee;
  text-align: center;
}

.bcsg-contact-lead {
  margin: 0 0 18px;
  font-family: "Raleway", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: #6a6a6a;
}

.bcsg-contact-mails {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 48px;
  margin: 0 0 26px;
}

.bcsg-contact-mail {
  display: inline-block;
  font-family: "Oswald", sans-serif;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: .5px;
  color: #0b1f6d;
  text-decoration: none;
  border-bottom: 2px solid #d71818;
  transition: color .3s ease, border-color .3s ease;
}

.bcsg-contact-mail:hover,
.bcsg-contact-mail:focus {
  color: #d71818;
  border-color: #0b1f6d;
}

.bcsg-contact-address {
  margin: 0;
  font-family: "Oswald", sans-serif;
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #7f7f7f;
}

@media (max-width: 767px) {
  .bcsg-contact { margin: 40px auto 50px; padding: 36px 20px; }
  .bcsg-contact-mail { font-size: 22px; }
  .bcsg-contact-mails { gap: 8px 24px; }
  .bcsg-contact-sep { display: block; height: 0; overflow: hidden; }
}


/* --------------------------------------------------------------------------
   12. News listings: image left, text right, centred column
   Listing pages only: the article page shares the .blog.page-holder wrapper
   and its paragraphs are direct children of .post, so the grid must exclude
   .single-post or the body text falls into two columns.
   Same type, colours and hover treatment as before; only the arrangement
   changes. The date stays overlaid on the picture; the title (moved into the
   text column by fix_site.py) takes the theme's heading colour since it is no
   longer on the image.
   -------------------------------------------------------------------------- */

.page-holder.blog:not(.single-post) .page_inner,
.page-holder.blog:not(.single-post) #blog.inner {
  float: none;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.page-holder.blog:not(.single-post) .post.type-post {
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  column-gap: 36px;
  align-items: start;
  position: relative;
  padding-bottom: 0;
  margin-bottom: 50px;
}

.page-holder.blog:not(.single-post) .post.type-post .single_item {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

.page-holder.blog:not(.single-post) .post.type-post .blog-head.inner-head {
  width: 400px;
  top: 0;
  left: 0;
}

.page-holder.blog:not(.single-post) .post.type-post .details {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.page-holder.blog:not(.single-post) .details > .blog-head-right {
  float: none;
  display: block;
  padding: 0;
  margin: 0 0 14px;
  color: #3e3e3e;
}

.page-holder.blog:not(.single-post) .details > .blog-head-right .blog-post-heading {
  margin: 0;
  font-size: 31px;          /* the size it had inside the header */
  word-break: normal;
  overflow-wrap: anywhere;
}

.page-holder.blog:not(.single-post) .details p.post-text { margin-bottom: 14px; }

.page-holder.blog:not(.single-post) .blog_pagination { max-width: 1000px; margin: 0 auto; }

@media (max-width: 991px) {
  .page-holder.blog:not(.single-post) .post.type-post { grid-template-columns: 300px minmax(0, 1fr); column-gap: 24px; }
  .page-holder.blog:not(.single-post) .post.type-post .blog-head.inner-head { width: 300px; }
}

@media (max-width: 767px) {
  .page-holder.blog:not(.single-post) .post.type-post { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .page-holder.blog:not(.single-post) .post.type-post .details { grid-column: 1; grid-row: 2; }
  .page-holder.blog:not(.single-post) .post.type-post .blog-head.inner-head { width: 100%; }
  .page-holder.blog:not(.single-post) .details > .blog-head-right .blog-post-heading { font-size: 22px; }
}


/* --------------------------------------------------------------------------
   13. Hero caption: bounded by the page, set at 80% of the theme's size
   The theme sizes the caption with `.home-inner.v2 .home-text-slider .home-texts
   .slide` (60px) but every responsive override in `responsive.css` targets
   `.text-slider`, a class that appears nowhere in the markup. None of them
   match, so the caption stayed 60px at every width and ran off the screen.

   The caption now gets a real page limit: the theme's 1170px measure, centred,
   with a 20px gutter so it never touches the edge. The size is 80% of what the
   theme asks for - 48px here, 40px for the news hero the theme pins at 50px -
   and only shrinks below that on screens too narrow to hold it, tracking the
   page width instead of stepping between breakpoints. "STRATEGICALLY" is 7.7x
   the font size, so 48px needs 410px of viewport; below that 11vw keeps the
   longest word inside the gutter.
   -------------------------------------------------------------------------- */

.home-inner.v2 .home-text-slider .home-texts .slide,
.blog .home-texts .slide {
  box-sizing: border-box;
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  line-height: 1.1;
}

.home-inner.v2 .home-text-slider .home-texts .slide {
  font-size: clamp(28px, 11vw, 60px) !important;   /* the theme's 60px; fluid only under 545px */
}

.blog .home-texts .slide {
  font-size: clamp(28px, 11vw, 50px) !important;   /* the theme's 50px; fluid only under 455px */
}


/* --------------------------------------------------------------------------
   14. Phones: player cards and club logos are shown again
   The delivered CSS hides every .mobile-center-row below 768px. That was
   fine for the icon strip and the statistics, but it also removed the
   player cards (Home, Players) and the seven club logos (Home "The Blue
   Crow Portfolio", Teams "Multi-Club Soccer Investment"). Those rows are the
   only hidden ones carrying vc_row-flex, so they are re-enabled by that
   class: cards stack one per row, logos sit three per row with the odd one
   centred. The icon strip and statistics stay hidden as designed.
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {
  .vc_row.mobile-center-row.vc_row-flex {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
  }

  .vc_row.mobile-center-row.vc_row-flex > .player-card {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 20px;
  }

  .vc_row.mobile-center-row.vc_row-flex > .one-seventh {
    width: 33.333% !important;
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin-bottom: 16px;
  }

  .vc_row.mobile-center-row.vc_row-flex > .one-seventh .wpb_single_image { text-align: center; }
  .vc_row.mobile-center-row.vc_row-flex > .one-seventh .wpb_text_column { text-align: center; }
}