/*
 * Shared parts of the redesigned public site, loaded on every public page by base-landing-page.html right
 * after buttons_redesign.css. One file instead of four, so every page makes fewer requests. Each part is
 * scoped to its own wrapper, so nothing else on the page is affected:
 *   1. Top bar        nav.sd-nav       (site_redesign.js)
 *   2. Footer         footer.sd-footer (site_redesign.js)
 *   3. Persona cards  .sd-pcta         "Are you working in football?" block (Football Directory and blog posts)
 *   4. Team card      .sd-team-card    "Looking for a team solution?" (homepage and persona pages)
 */

/* ================================================================== 1. Top bar */

/*
 * Public site top bar redesign (full bar and the simplified Blog / Legal / Plans bars), loaded after
 * buttons_redesign.css. Every rule is scoped to nav.sd-nav and every colour and size is a token below.
 * - stays at the top while scrolling, with a shadow once the page has moved (site_redesign.js)
 * - current page marked with a green underline
 * - Softwares menu with a dot in each persona colour
 * - buttons with the shared look of buttons_redesign.css: Try For Free green, Log In / Book a Demo outlined
 * - phone menu: bigger tap targets and full-width buttons at the bottom
 */

/* ------------------------------------------------------------------ Tokens */

/* Persona colours, lightened to read on the dark navy (shared with the footer below) */
:root {
  --sd-nav-scouts: #2EA3A3;
  --sd-nav-coaches: #4F86E8;
  --sd-nav-agents: #A65BB0;
  --sd-nav-clubs: #4CAF3F;
}

.sd-nav {
  --sd-nav-bg: #111827;
  --sd-nav-link: #C9D2E0;
  --sd-nav-link-hover: #FFFFFF;
  --sd-nav-accent: #50D878;
  --sd-nav-menu-bg: #1F2A3D;
  --sd-nav-menu-hover: rgba(255, 255, 255, 0.08);
  --sd-nav-line: rgba(255, 255, 255, 0.08);
  --sd-nav-shadow: 0 16px 36px -18px rgba(0, 0, 0, 0.7);
  --sd-nav-glow: rgba(80, 216, 120, 0.55);

  /* Floating capsule once the page has scrolled */
  --sd-nav-pill-bg: rgba(17, 24, 39, 0.9);
  --sd-nav-pill-radius: 1rem;
  --sd-nav-pill-inset-y: -0.25rem;
  --sd-nav-pill-drop: 0.5rem;
  --sd-nav-pill-inset-x: -1rem;
  --sd-nav-z: 1045;

  /* Buttons of the bar: same tokens as buttons_redesign.css, sized for the bar */
  --sd-btn-font-size: 0.9375rem;
  --sd-btn-padding-y: 0.4375rem;
  --sd-btn-padding-x: 1.25rem;
  --sd-btn-ghost-border: rgba(255, 255, 255, 0.45);

  /*
   * Stays at the top while scrolling. The z-index is the offcanvas one, so the phone menu (inside the bar)
   * still sits above its backdrop, while modals stay above the bar.
   */
  position: sticky;
  top: 0;
  z-index: var(--sd-nav-z);
  background-color: var(--sd-nav-bg);
  transition: background-color .25s ease;
}

/* Links to a section (#faqs, feature blocks) stop below the bar instead of under it */
html:has(nav.sd-nav) {
  scroll-padding-top: 5rem;
}

/*
 * At the top of the page: full-width bar with a thin green light along its bottom edge.
 * Once scrolled: the bar itself turns transparent and its content sits in a floating, rounded,
 * translucent capsule (drawn by .container::before, so the layout and height never change).
 */
.sd-nav::after {
  content: "";
  position: absolute;
  /* Behind the bar's content, so the open dropdown menus cover it */
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--sd-nav-glow) 50%, transparent 100%);
  transition: opacity .25s ease;
}

.sd-nav > .container {
  position: relative;
  isolation: isolate;
}

.sd-nav > .container::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: var(--sd-nav-pill-inset-y) var(--sd-nav-pill-inset-x);
  border: 1px solid var(--sd-nav-line);
  border-radius: var(--sd-nav-pill-radius);
  background-color: var(--sd-nav-pill-bg);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--sd-nav-shadow);
  opacity: 0;
  transform: scale(0.98);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}

/* Capsule moved down from the top edge; padding only moves from bottom to top, so the bar keeps its height */
.sd-nav.sd-nav--scrolled {
  padding-top: calc(var(--bs-navbar-padding-y) + var(--sd-nav-pill-drop));
  padding-bottom: calc(var(--bs-navbar-padding-y) - var(--sd-nav-pill-drop));
  background-color: transparent !important;
}

.sd-nav.sd-nav--scrolled::after {
  opacity: 0;
}

.sd-nav.sd-nav--scrolled > .container::before {
  opacity: 1;
  transform: none;
}

/* Phones: the capsule keeps a gutter from the screen edges, the content a gutter inside it */
@media (max-width: 991.98px) {
  .sd-nav {
    --sd-nav-pill-inset-x: 0.5rem;
  }

  .sd-nav > .container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* ------------------------------------------------------------------ Links */

.sd-nav .navbar-nav .nav-link {
  color: var(--sd-nav-link);
  font-weight: 500;
  text-decoration: none;
  transition: color .2s ease;
}

.sd-nav .navbar-nav .nav-link:hover,
.sd-nav .navbar-nav .nav-link:focus-visible,
.sd-nav .navbar-nav .nav-link.show {
  color: var(--sd-nav-link-hover);
  text-decoration: none;
}

/* Keyboard focus: the brand green ring instead of Bootstrap's dark blue one */
.sd-nav .navbar-nav .nav-link:focus-visible,
.sd-nav .navbar-brand:focus-visible,
.sd-nav .dropdown-item:focus-visible {
  outline: 0;
  border-radius: 0.375rem;
  box-shadow: var(--sd-btn-focus-ring);
}

/* Current page: white with a green underline (the dropdown caret is not underlined) */
.sd-nav .navbar-nav .nav-link.active,
.sd-nav .navbar-nav .nav-link.active:hover {
  color: var(--sd-nav-link-hover);
  text-decoration: underline;
  text-decoration-color: var(--sd-nav-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.5rem;
}

/* ------------------------------------------------------------------ Dropdown menus */

.sd-nav .dropdown-menu {
  padding: 0.375rem;
  background-color: var(--sd-nav-menu-bg) !important;
  border: 1px solid var(--sd-nav-line);
  border-radius: 0.75rem;
  box-shadow: 0 18px 36px -12px rgba(0, 0, 0, 0.55);
}

.sd-nav .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  color: var(--sd-nav-link);
}

.sd-nav .dropdown-item:hover,
.sd-nav .dropdown-item:focus-visible {
  color: var(--sd-nav-link-hover);
  background-color: var(--sd-nav-menu-hover);
}

/* Dot in the persona colour before each Softwares entry */
.sd-nav-dot {
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background-color: var(--sd-nav-dot, var(--sd-nav-accent));
}

.sd-nav-dot--scouts { --sd-nav-dot: var(--sd-nav-scouts); }
.sd-nav-dot--coaches { --sd-nav-dot: var(--sd-nav-coaches); }
.sd-nav-dot--agents { --sd-nav-dot: var(--sd-nav-agents); }
.sd-nav-dot--clubs { --sd-nav-dot: var(--sd-nav-clubs); }

/* ------------------------------------------------------------------ Buttons */

.sd-nav .btn {
  font-size: var(--sd-btn-font-size);
  font-weight: var(--sd-btn-font-weight);
  line-height: var(--sd-btn-line-height);
  padding: var(--sd-btn-padding-y) var(--sd-btn-padding-x);
  border-width: var(--sd-btn-border-width);
  border-style: solid;
  border-radius: var(--sd-btn-radius);
  transition: var(--sd-btn-transition);
}

/* Language switcher: plain, no box */
.sd-nav .btn.dropdown-toggle {
  color: var(--sd-nav-link-hover);
  background-color: transparent;
  border-color: transparent;
}

.sd-nav .btn.dropdown-toggle:is(:hover, :focus-visible, .show) {
  color: var(--sd-nav-link-hover);
  background-color: var(--sd-nav-menu-hover);
  border-color: transparent;
}

/* Log In and Book a Demo: outlined in white */
.sd-nav .btn:is([href*="login"], .google-analytics-calendly) {
  color: var(--sd-btn-ghost-color);
  background-color: transparent;
  border-color: var(--sd-btn-ghost-border);
}

.sd-nav .btn:is([href*="login"], .google-analytics-calendly):is(:hover, :focus-visible, :active) {
  color: var(--sd-btn-ghost-color);
  background-color: var(--sd-btn-ghost-bg-hover);
  border-color: var(--sd-btn-ghost-color);
}

/* Try For Free: brand green */
.sd-nav .btn:is([href*="register/plan"], [data-bs-target="#plansFilterModal"]) {
  color: var(--sd-btn-primary-color);
  background-color: var(--sd-btn-primary-bg);
  border-color: var(--sd-btn-primary-bg);
}

.sd-nav .btn:is([href*="register/plan"], [data-bs-target="#plansFilterModal"]):is(:hover, :focus-visible, :active) {
  color: var(--sd-btn-primary-color);
  background-color: var(--sd-btn-primary-bg-hover);
  border-color: var(--sd-btn-primary-bg-hover);
}

.sd-nav .btn:focus-visible {
  outline: 0;
  box-shadow: var(--sd-btn-focus-ring);
}

/* ------------------------------------------------------------------ Phone menu */

@media (max-width: 991.98px) {
  .sd-nav .offcanvas-body {
    display: flex;
    flex-direction: column;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  }

  /* Both lists use the whole width (the utilities pe-3 / align-items-center are !important) */
  .sd-nav .offcanvas-body > .navbar-nav {
    width: 100%;
    flex-grow: 0 !important;
    align-items: stretch !important;
    padding-right: 0 !important;
  }

  /* Big tap targets, one per row, with a thin line between them */
  .sd-nav .offcanvas-body > .navbar-nav > .nav-item > .nav-link {
    padding: 0.875rem 0;
    font-size: 1.125rem;
    text-align: center;
    border-bottom: 1px solid var(--sd-nav-line);
  }

  .sd-nav .offcanvas-body .dropdown-menu {
    margin-bottom: 0.5rem;
    text-align: left;
  }

  .sd-nav .offcanvas-body .dropdown-item {
    padding: 0.75rem 1rem;
    font-size: 1rem;
  }

  /* Buttons at the bottom of the menu, full width */
  .sd-nav .offcanvas-body > .navbar-nav:last-child {
    flex-direction: column !important;
    gap: 0.75rem;
    margin-top: auto !important;
    padding-top: 2rem;
  }

  .sd-nav .offcanvas-body > .navbar-nav:last-child > .nav-item {
    margin: 0 !important;
  }

  .sd-nav .offcanvas-body .btn {
    width: 100%;
    --sd-btn-font-size: 1.0625rem;
    --sd-btn-padding-y: 0.75rem;
  }

  /* The simplified bars have one list only: its link stays a row, its button goes full width */
  .sd-nav--simple .offcanvas-body > .navbar-nav:last-child {
    margin-top: 1rem !important;
    padding-top: 0;
    gap: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sd-nav,
  .sd-nav::after,
  .sd-nav > .container::before,
  .sd-nav .nav-link,
  .sd-nav .btn {
    transition: none;
  }
}

/* ------------------------------------------------------------------ Simplified bar (plans and checkout) */

/* Same width as the full bar (Bootstrap container widths), so its floating background stays inside the screen */
@media (min-width: 992px) {
  .sd-nav--simple > .container-secondary {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .sd-nav--simple > .container-secondary {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .sd-nav--simple > .container-secondary {
    max-width: 1320px;
  }
}

/* Logo, a thin divider and the section name in a soft pill */
.sd-nav-section {
  display: inline-flex;
  align-items: center;
  margin-left: 0.875rem;
  padding: 0.3125rem 0.875rem;
  border: 1px solid var(--sd-nav-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--sd-nav-link-hover);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: border-color .2s ease, background-color .2s ease;
}

.sd-nav-section::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--sd-nav-accent);
  box-shadow: 0 0 0 3px rgba(80, 216, 120, 0.2);
}

.sd-nav--simple .navbar-brand:hover .sd-nav-section {
  border-color: rgba(80, 216, 120, 0.5);
  background: rgba(80, 216, 120, 0.1);
}

/* "Homepage": a way back, with a small arrow */
.sd-nav--simple .navbar-nav .nav-link[href] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.sd-nav--simple .navbar-nav .nav-link[href]::before {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 18l-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 18l-6-6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s ease;
}

.sd-nav--simple .navbar-nav .nav-link[href]:hover::before {
  transform: translateX(-3px);
}

@media (max-width: 991.98px) {
  .sd-nav--simple .navbar-nav .nav-link[href] {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sd-nav-section,
  .sd-nav--simple .navbar-nav .nav-link[href]::before {
    transition: none;
  }
}

/* ================================================================== 2. Footer */

/*
 * Public site footer redesign (full footer and the simplified Blog / Legal / Plans footer).
 * Every rule is scoped to footer.sd-footer and every colour and size is a token below.
 * Same content, links and texts; only the look and a few motions change:
 * - rounded "sheet" with a green light along its top edge, a soft green glow and the SD logo as a watermark
 * - social icons in round buttons, links with a growing green underline, persona dots as in the top bar
 * - columns rise into place when the footer comes into view (site_redesign.js; off with reduced motion)
 * - on phones the link columns sit side by side, so the footer is much shorter
 */

/* ------------------------------------------------------------------ Tokens */

.sd-footer {
  --sd-footer-bg: #111827;
  --sd-footer-text: #C9D2E0;
  --sd-footer-strong: #FFFFFF;
  --sd-footer-muted: #8C98AB;
  --sd-footer-heading: #50D878;
  --sd-footer-accent: #50D878;
  --sd-footer-line: rgba(255, 255, 255, 0.08);
  --sd-footer-glow: rgba(80, 216, 120, 0.14);
  --sd-footer-edge: rgba(80, 216, 120, 0.55);
  --sd-footer-radius: 2rem;
  --sd-footer-social-size: 2.5rem;
  --sd-footer-watermark-size: 22rem;
  --sd-footer-watermark-opacity: 0.07;
  --sd-footer-rise: 1rem;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* The templates push the footer 100px down (inline style), which left a blank strip above it */
  bottom: 0 !important;
  border-top: 0 !important;
  border-radius: var(--sd-footer-radius) var(--sd-footer-radius) 0 0;
  background-color: var(--sd-footer-bg) !important;
  background-image:
    radial-gradient(ellipse 60% 70% at 0% 0%, var(--sd-footer-glow) 0%, transparent 70%),
    radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 100% 100%, 22px 22px;
}

/*
 * The Football Directory page sets "footer.footer-landing-page { position: static !important }"; the glow
 * and the watermark need the footer as their frame, so it stays positioned (stronger selector).
 */
footer.sd-footer.sd-footer {
  position: relative !important;
}

/* Green light along the top edge (same as the top bar) */
.sd-footer::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--sd-footer-edge) 50%, transparent 100%);
}

/* SD logo as a faint watermark in the bottom right corner */
.sd-footer::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: calc(var(--sd-footer-watermark-size) * -0.18);
  bottom: calc(var(--sd-footer-watermark-size) * -0.22);
  width: var(--sd-footer-watermark-size);
  height: var(--sd-footer-watermark-size);
  background: url("/static/assets/images/sd-192.webp") center / contain no-repeat;
  opacity: var(--sd-footer-watermark-opacity);
  pointer-events: none;
}

/* ------------------------------------------------------------------ Full footer: columns */

.sd-footer .footer-wrapper {
  padding-top: 1.5rem;
}

.sd-footer .footer-wrapper-grid-info p {
  color: var(--sd-footer-text) !important;
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* Column titles: small, uppercase, in green */
.sd-footer .footer-wrapper-grid-block-heading {
  margin-bottom: 0.75rem;
}

.sd-footer .footer-wrapper-grid-block-heading span {
  color: var(--sd-footer-heading) !important;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Links with a green underline that grows on hover */
.sd-footer .footer-wrapper-grid-block-link {
  gap: 0.625rem;
  width: fit-content;
  color: var(--sd-footer-text) !important;
  font-size: 0.875rem;
  text-decoration: none;
  background-image: linear-gradient(var(--sd-footer-accent), var(--sd-footer-accent));
  background-repeat: no-repeat;
  background-position: 0 calc(100% - 2px);
  background-size: 0 1px;
  transition: color .2s ease, background-size .25s ease;
}

.sd-footer .footer-wrapper-grid-block-link:hover,
.sd-footer .footer-wrapper-grid-block-link:focus-visible {
  color: var(--sd-footer-strong) !important;
  text-decoration: none;
  background-size: 100% 1px;
}

/* ------------------------------------------------------------------ Social icons and app badges */

.sd-footer .footer-wrapper-grid-info-social,
.sd-footer ul.nav:has(.tw-ic) {
  gap: 0.5rem;
}

.sd-footer :is(.tw-ic, .li-ic, .yt-ic, .fb-ic) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sd-footer-social-size);
  height: var(--sd-footer-social-size);
  border: 1px solid var(--sd-footer-line);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.04);
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.sd-footer :is(.tw-ic, .li-ic, .yt-ic, .fb-ic) i {
  margin: 0 !important;
  color: var(--sd-footer-text) !important;
  transition: color .2s ease;
}

.sd-footer :is(.tw-ic, .li-ic, .yt-ic, .fb-ic):hover,
.sd-footer :is(.tw-ic, .li-ic, .yt-ic, .fb-ic):focus-visible {
  border-color: var(--sd-footer-accent);
  background-color: var(--sd-footer-accent);
  transform: translateY(-2px);
}

.sd-footer :is(.tw-ic, .li-ic, .yt-ic, .fb-ic):hover i,
.sd-footer :is(.tw-ic, .li-ic, .yt-ic, .fb-ic):focus-visible i {
  color: var(--sd-footer-bg) !important;
}

.sd-footer a[href*="play.google.com"],
.sd-footer a[href*="apps.apple.com"] {
  display: inline-block;
  border-radius: 0.5rem;
  transition: transform .2s ease;
}

.sd-footer a[href*="play.google.com"]:hover,
.sd-footer a[href*="apps.apple.com"]:hover {
  transform: translateY(-2px);
}

/* ------------------------------------------------------------------ Bottom bar */

.sd-footer .footer-wrapper-bottom {
  border-top-color: var(--sd-footer-line) !important;
  color: var(--sd-footer-muted) !important;
  font-size: 0.75rem;
}

.sd-footer .footer-wrapper-bottom-right a {
  color: var(--sd-footer-muted) !important;
  transition: color .2s ease;
}

.sd-footer .footer-wrapper-bottom-right a:hover,
.sd-footer .footer-wrapper-bottom-right a:focus-visible {
  color: var(--sd-footer-accent) !important;
}

.sd-footer .dot-divider {
  background-color: var(--sd-footer-muted) !important;
}

/* Language switcher of the simplified footer: plain, no box */
.sd-footer .btn.dropdown-toggle {
  color: var(--sd-footer-strong);
  background-color: transparent;
  border-color: transparent;
  border-radius: 0.5rem;
}

.sd-footer .btn.dropdown-toggle:is(:hover, :focus-visible, .show) {
  color: var(--sd-footer-strong);
  background-color: rgba(255, 255, 255, 0.08);
  border-color: transparent;
}

.sd-footer .dropdown-menu {
  padding: 0.375rem;
  background-color: #1F2A3D !important;
  border: 1px solid var(--sd-footer-line);
  border-radius: 0.75rem;
}

.sd-footer .dropdown-item {
  border-radius: 0.5rem;
  color: var(--sd-footer-text);
}

.sd-footer .dropdown-item:hover,
.sd-footer .dropdown-item:focus-visible {
  color: var(--sd-footer-strong);
  background-color: rgba(255, 255, 255, 0.08);
}

/* Simplified footer: the line under the tagline in the same soft colour */
.sd-footer .lp-border-bottom-600 {
  border-bottom-color: var(--sd-footer-line) !important;
}

.sd-footer--simple p.text-center {
  color: var(--sd-footer-text) !important;
}

/* Keyboard focus: brand green ring */
.sd-footer a:focus-visible,
.sd-footer .btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(80, 216, 120, 0.35);
}

/* ------------------------------------------------------------------ Entrance (site_redesign.js) */

/* Only hidden once the script is running, so the footer is always visible without it */
.sd-footer.sd-footer--ready .sd-footer-rise {
  opacity: 0;
  transform: translateY(var(--sd-footer-rise));
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: calc(var(--sd-footer-i, 0) * 90ms);
}

.sd-footer.sd-footer--in .sd-footer-rise {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------------ Phones */

@media (max-width: 767.98px) {
  .sd-footer {
    --sd-footer-radius: 1.5rem;
    --sd-footer-watermark-size: 14rem;
  }

  /* Link columns side by side (the info block keeps the whole width) */
  .sd-footer .footer-wrapper-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 1.5rem !important;
    row-gap: 2rem !important;
  }

  .sd-footer .footer-wrapper-grid-info {
    grid-column: 1 / -1;
  }

  /* Tagline centred like the logo and the icons above and below it */
  .sd-footer .footer-wrapper-grid-info p {
    text-align: center;
  }

  .sd-footer .footer-wrapper-grid-block {
    align-items: flex-start !important;
  }

  .sd-footer .footer-wrapper-grid-block-link {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sd-footer *,
  .sd-footer.sd-footer--ready .sd-footer-rise {
    transition: none !important;
  }

  .sd-footer.sd-footer--ready .sd-footer-rise {
    opacity: 1;
    transform: none;
  }
}

/* ================================================================== 3. Persona cards (Are you working in football?) */

/*
 * "Are you working in football?" block (frontpage/includes/football_directory_cta.html), shown at the end of
 * the Football Directory pages and of every blog post. Dark panel with one photo card per persona: the photo
 * fills the card, the persona colour rises from the bottom and the persona line is set in white.
 * Every rule is scoped to .sd-pcta.
 */

.sd-pcta {
  --sd-pcta-navy: #111827;
  --sd-pcta-green: #50D878;
  --sd-pcta-height: 13rem;
  margin-bottom: 0 !important;
}

.sd-pcta-card--scouts { --sd-pcta-accent: #136B6B; }
.sd-pcta-card--coaches { --sd-pcta-accent: #1F55B8; }
.sd-pcta-card--agents { --sd-pcta-accent: #611F69; }
.sd-pcta-card--clubs { --sd-pcta-accent: #226F18; }

/* Order of each card, used to stagger the arrow pulse */
.sd-pcta-card:nth-child(2) { --sd-pcta-i: 1; }
.sd-pcta-card:nth-child(3) { --sd-pcta-i: 2; }
.sd-pcta-card:nth-child(4) { --sd-pcta-i: 3; }

.sd-pcta-panel {
  position: relative;
  overflow: hidden;
  padding: 2.25rem;
  border-radius: 1.5rem;
  background-color: var(--sd-pcta-navy);
  background-image:
    radial-gradient(ellipse 55% 90% at 100% 0%, rgba(80, 216, 120, 0.16) 0%, transparent 70%),
    radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 100% 100%, 22px 22px;
  box-shadow: 0 32px 64px -28px rgba(17, 24, 39, 0.6);
}

/* Green light along the top edge, as in the other dark panels */
.sd-pcta-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(80, 216, 120, 0.55) 50%, transparent 100%);
}

.sd-pcta-title {
  margin: 0 0 1.5rem;
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: #FFFFFF;
  text-wrap: balance;
}

.sd-pcta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

/* ------------------------------------------------------------------ Persona cards */

.sd-pcta-card {
  --sd-pcta-i: 0;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: var(--sd-pcta-height);
  padding: 1.25rem;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--sd-pcta-accent);
  color: #FFFFFF;
  text-decoration: none;
  box-shadow: inset 0 -4px 0 var(--sd-pcta-accent);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
}

.sd-pcta-card img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}

/* Persona colour rising from the bottom */
.sd-pcta-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.1) 0%, rgba(17, 24, 39, 0.85) 100%);
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.05) 0%, color-mix(in srgb, var(--sd-pcta-accent) 60%, transparent) 50%, color-mix(in srgb, var(--sd-pcta-accent) 96%, #000000) 100%);
}

.sd-pcta-name {
  font-size: 1.125rem;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.2px;
  text-wrap: balance;
}

/* Round arrow in the top right corner, with a pulse passing from card to card */
.sd-pcta-arrow {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--sd-pcta-accent);
  font-size: 0.875rem;
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.6);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), background-color .3s ease, color .3s ease;
}

.sd-pcta-arrow::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  opacity: 0;
  animation: sd-pcta-ping 4s ease-out infinite;
  animation-delay: calc(1s + var(--sd-pcta-i) * 0.6s);
}

@keyframes sd-pcta-ping {
  0% { transform: scale(1); opacity: 0.9; }
  30% { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}

.sd-pcta-card:hover,
.sd-pcta-card:focus-visible {
  color: #FFFFFF;
  transform: translateY(-4px);
  box-shadow: inset 0 -4px 0 var(--sd-pcta-accent), 0 20px 40px -16px rgba(0, 0, 0, 0.7);
}

.sd-pcta-card:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--sd-pcta-green);
}

.sd-pcta-card:hover img,
.sd-pcta-card:focus-visible img {
  transform: scale(1.08);
}

.sd-pcta-card:hover .sd-pcta-arrow,
.sd-pcta-card:focus-visible .sd-pcta-arrow {
  background: var(--sd-pcta-green);
  color: var(--sd-pcta-navy);
  transform: rotate(-45deg) scale(1.1);
}

.sd-pcta-grid:hover .sd-pcta-arrow::after {
  visibility: hidden;
}

/* ------------------------------------------------------------------ Small screens */

@media (max-width: 991.98px) {
  .sd-pcta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .sd-pcta {
    --sd-pcta-height: 9rem;
  }

  .sd-pcta-panel {
    padding: 1.5rem 1rem 1rem;
    border-radius: 1.25rem;
  }

  .sd-pcta-grid {
    gap: 0.625rem;
  }

  .sd-pcta-card {
    padding: 0.875rem;
  }

  .sd-pcta-name {
    font-size: 0.9375rem;
  }

  .sd-pcta-arrow {
    top: 0.625rem;
    right: 0.625rem;
    width: 2rem;
    height: 2rem;
    font-size: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sd-pcta-card,
  .sd-pcta-card img,
  .sd-pcta-arrow {
    transition: none;
  }

  .sd-pcta-card:hover,
  .sd-pcta-card:hover img {
    transform: none;
  }

  .sd-pcta-arrow::after {
    animation: none;
  }
}

/* ================================================================== 4. Team card (Looking for a team solution?) */

/*
 * "Looking for a team solution?" card (homepage and persona pages).
 * The illustration that sat on its right is hidden, so the card takes the whole width: on large screens the
 * title sits on the left and the text with the Book a Demo button on the right, which keeps it short.
 * Same texts and button; only scoped to .sd-team-card.
 */

.sd-team-card {
  --sd-team-glow: rgba(80, 216, 120, 0.18);
  --sd-team-dots: rgba(255, 255, 255, 0.06);
  --sd-team-line: rgba(80, 216, 120, 0.55);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.25rem !important;
  box-shadow: 0 24px 48px -28px rgba(17, 24, 39, 0.7);
}

/*
 * Soft green glow and dots over the card colour. The persona pages set that colour with the background
 * shorthand and !important (.sd-pp .sd-pp-team .lp-bg-gray-900), so this rule needs a stronger selector.
 */
.sd-team-card,
.sd-pp .sd-pp-team .lp-bg-gray-900.sd-team-card {
  background-image:
    radial-gradient(ellipse 45% 120% at 100% 0%, var(--sd-team-glow) 0%, transparent 70%),
    radial-gradient(var(--sd-team-dots) 1px, transparent 1px) !important;
  background-size: 100% 100%, 22px 22px !important;
}

/* Green light along the top edge, as in the other redesigned dark panels */
.sd-team-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--sd-team-line) 50%, transparent 100%);
}

/* Line under the title in the brand green (it is drawn with a bottom border) */
.sd-team-card .mkd-separator {
  border-color: #50D878;
}

/* Large screens: title (and its line) on the left, text and button on the right */
@media (min-width: 992px) {
  .sd-team-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    column-gap: 4rem;
    align-items: center;
    padding: 2.75rem 3.5rem !important;
  }

  .sd-team-card > h2 {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: end;
    margin: 0 !important;
  }

  .sd-team-card > .d-flex {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
  }

  .sd-team-card > p,
  .sd-team-card > .d-grid {
    grid-column: 2;
  }

  .sd-team-card > p:first-of-type {
    grid-row: 1;
    align-self: end;
  }

  .sd-team-card > p:last-of-type {
    grid-row: 2;
    margin-bottom: 1rem;
  }

  .sd-team-card > .d-grid {
    grid-row: 3;
    margin-bottom: 0 !important;
  }

  .sd-team-card > p {
    font-size: 1.0625rem !important;
  }
}