*{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:'Montserrat',Arial,sans-serif;color:#14171f;background:#f6f7f9;-webkit-font-smoothing:antialiased}
  a{color:#16225c;text-decoration:none}
  a:hover{color:#f5a623}
  img{display:block;max-width:100%}
  ::selection{background:#f5a623;color:#16225c}
  @keyframes riseIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}

  /* ===== RESPONSIVE ===== */
  .nav-burger{display:none}
  @media (max-width:960px){
    [style*="grid-template-columns: repeat(4, 1fr)"]{grid-template-columns:repeat(2,1fr)!important}
    [style*="grid-template-columns: repeat(3, 1fr)"]{grid-template-columns:repeat(2,1fr)!important}
    [style*="grid-template-columns: repeat(5, 1fr)"]{grid-template-columns:repeat(3,1fr)!important}
    [style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr!important}
    [style*="grid-template-columns: 1.2fr 0.8fr"]{grid-template-columns:1fr!important}
    [style*="grid-template-columns: 0.9fr 1.1fr"]{grid-template-columns:1fr!important}
    [style*="grid-template-columns: 0.85fr 1.15fr"]{grid-template-columns:1fr!important}
    [style*="grid-template-columns: auto 1fr"]{grid-template-columns:1fr!important}
    [style*="grid-template-columns: 1.3fr 1fr 1fr 1.2fr"]{grid-template-columns:1fr 1fr!important}
  }
  @media (max-width:900px){
    .main-nav{
      display:flex!important;position:absolute;top:100%;left:0;right:0;z-index:45;
      flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;
      background:#fff;padding:8px 0!important;box-shadow:0 20px 40px rgba(22,34,92,.2);
      border-top:3px solid #f5a623;
      max-height:0;opacity:0;visibility:hidden;overflow:hidden;
      transition:max-height .32s cubic-bezier(.4,0,.2,1),opacity .22s ease;
    }
    .main-nav.open{max-height:80vh;opacity:1;visibility:visible;overflow:auto}
    .main-nav [style*="position: relative"]{width:100%}
    .main-nav [style*="position: absolute"]{position:static!important;transform:none!important;box-shadow:none!important;min-width:0!important;padding:0!important;background:transparent!important}
    .nav-burger{display:inline-flex!important;position:relative;z-index:55;border-radius:6px}
  }
  /* Secondary navigation (dropdown submenus under Club/Teams/Matches/Media) on mobile:
     collapsed accordion rows that expand only when their parent item is tapped, rather
     than always being expanded. */
  @media (max-width:900px){
    .main-nav .wc-nav-item{width:100%;border-bottom:1px solid #eef0f5}
    .main-nav .wc-nav-item:last-child{border-bottom:none}
    .main-nav .wc-nav-item>a{width:100%;padding:14px 20px!important;min-height:24px}
    .main-nav .wc-nav-item.open>a{color:#16225c!important}
    .main-nav .wc-caret.open{transform:rotate(180deg)}
    .main-nav .wc-dropdown{
      position:static!important;top:auto!important;left:auto!important;transform:none!important;
      box-shadow:none!important;border-top:none!important;min-width:0!important;width:100%!important;
      padding:0!important;background:#f7f8fb!important;
      display:block!important;max-height:0;overflow:hidden;
      transition:max-height .28s ease;
    }
    .main-nav .wc-dropdown.open{max-height:400px}
    .main-nav .wc-dropdown a{padding:12px 20px 12px 38px!important;border-top:1px solid #ecedf3}
    .main-nav .wc-dropdown a:first-child{border-top:none}
  }
  @media (min-width:901px){
    .wc-nav-item:hover>a>.wc-caret,.wc-nav-item:focus-within>a>.wc-caret{transform:rotate(180deg)}
  }
  /* Dimmed backdrop behind the open mobile menu, closes the menu on tap-outside. */
  .wc-nav-backdrop{display:none}
  @media (max-width:900px){
    .wc-nav-backdrop{
      display:block;position:fixed;inset:0;background:rgba(15,20,45,.42);
      z-index:40;opacity:0;pointer-events:none;transition:opacity .25s ease;
    }
    .wc-nav-backdrop.open{opacity:1;pointer-events:auto}
  }
  /* Hamburger → close (X) animation. */
  @media (max-width:900px){
    .nav-burger .wc-burger-bar:nth-child(1){transform-origin:center}
    .nav-burger .wc-burger-bar:nth-child(3){transform-origin:center}
    .nav-burger.active .wc-burger-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
    .nav-burger.active .wc-burger-bar:nth-child(2){opacity:0}
    .nav-burger.active .wc-burger-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  }
  @media (max-width:600px){
    [style*="grid-template-columns: repeat(3, 1fr)"]{grid-template-columns:1fr!important}
    [style*="grid-template-columns: repeat(5, 1fr)"]{grid-template-columns:repeat(2,1fr)!important}
    [style*="grid-template-columns: 1.3fr 1fr 1fr 1.2fr"]{grid-template-columns:1fr!important}
    [style*="grid-template-columns: 130px 1fr auto"]{grid-template-columns:1fr!important;gap:10px!important}
    [style*="padding: 80px 24px"]{padding:48px 18px!important}
    [style*="padding: 80px 0 74px"]{padding:52px 0 44px!important}
    [style*="padding: 64px 0"]{padding:44px 0!important}
    [style*="padding: 74px 0"]{padding:48px 0!important}
    [style*="padding: 56px 24px"]{padding:40px 18px!important}
    [style*="padding: 60px 24px"]{padding:40px 18px!important}
    .club-stat[style*="grid-template-columns: repeat(4, 1fr)"]{grid-template-columns:repeat(2,1fr)!important}
  }


/* EazzyWebsites conversion helpers */
[data-vdc-path]{box-sizing:border-box}
button,a,input,select,textarea{font-family:inherit}
.vdc-toast{position:fixed;right:18px;bottom:18px;z-index:9999;background:#16225c;color:#fff;padding:12px 16px;border-radius:8px;box-shadow:0 12px 36px rgba(0,0,0,.2);font-size:13px;opacity:0;transform:translateY(8px);pointer-events:none;transition:.2s}
.vdc-toast.show{opacity:1;transform:none}

/* Responsive hardening added during EazzyWebsites QA. The supplied prototype's
   attribute selectors contained whitespace variants that browsers did not match. */
@media (max-width:960px){
  [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr)!important}
  [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:repeat(2,1fr)!important}
  [style*="grid-template-columns:repeat(5,1fr)"]{grid-template-columns:repeat(3,1fr)!important}
  [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
  [style*="grid-template-columns:1.2fr .8fr"],[style*="grid-template-columns:1.2fr 0.8fr"]{grid-template-columns:1fr!important}
  [style*="grid-template-columns:.9fr 1.1fr"],[style*="grid-template-columns:0.9fr 1.1fr"]{grid-template-columns:1fr!important}
  [style*="grid-template-columns:.85fr 1.15fr"],[style*="grid-template-columns:0.85fr 1.15fr"]{grid-template-columns:1fr!important}
  [style*="grid-template-columns:auto 1fr"]{grid-template-columns:1fr!important}
  [style*="grid-template-columns:1.3fr 1fr 1fr 1.2fr"]{grid-template-columns:1fr 1fr!important}
}
@media (max-width:600px){
  [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr!important}
  [style*="grid-template-columns:repeat(5,1fr)"]{grid-template-columns:repeat(2,1fr)!important}
  [style*="grid-template-columns:1.3fr 1fr 1fr 1.2fr"]{grid-template-columns:1fr 1fr!important}
  [style*="grid-template-columns:130px 1fr auto"]{grid-template-columns:1fr!important;gap:10px!important}
  .club-stat[style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr)!important}
  header>div{padding-left:12px!important;padding-right:12px!important;gap:8px!important}
  header>div>a:first-child img{height:42px!important}
  header>div>a:first-child span span:first-child{font-size:16px!important}
  header>div>a:first-child span span:last-child{font-size:8px!important;letter-spacing:.16em!important}
  header>div>a:last-child{padding:10px 14px!important;font-size:11.5px!important}
}
@media (max-width:380px){
  header>div>a:first-child span span:last-child{display:none!important}
}
/* Two-column grids (pillars, squad cards, product grid, partner logos) still overflow on
   narrower phones because their cards don't fit two-up; collapse fully to one column. */
@media (max-width:480px){
  .club-stat[style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:1fr!important}
}

/* Site-wide call-to-action band (shown above the footer on every public page). */
.wc-cta>div{text-align:left}
@media (max-width:760px){
  .wc-cta>div{padding:44px 20px!important;flex-direction:column!important;align-items:flex-start!important;gap:22px!important}
  .wc-cta>div>div:last-child{width:100%}
  .wc-cta>div>div:last-child a{flex:1 1 auto;text-align:center}
}
/* Mobile header layout: hamburger on the left, logo centered, Join Us on the right.
   The header's flex children are, in DOM order: logo <a>, <nav>, backdrop <div>, burger
   <button>, Join Us <a>. The backdrop is position:fixed (out of flow) so it doesn't affect
   this layout. Reorder visually with flex `order` rather than changing the DOM, so
   accessibility/tab order stays logical while the on-screen layout matches the mobile spec. */
@media (max-width:900px){
  header>div{justify-content:space-between}
  /* The logo link carries an inline flex-shrink:0 from the desktop layout; a plain
     (non-!important) override here loses to that inline style regardless of selector
     specificity, so this rule must be !important or the logo refuses to shrink and
     pushes the header into horizontal overflow on narrow screens. */
  header>div>a:first-child{order:2;flex:1 1 auto!important;display:flex;justify-content:center;text-align:center;min-width:0}
  header>div>a:first-child span{text-align:center}
  .nav-burger{order:1}
  header>div>a:last-child{order:3;flex-shrink:0}
}

/* Footer on mobile: keep the two-column layout (Brand+Explore / Club+Contact)
   from the tablet breakpoint, but tighten spacing and typography so it doesn't
   feel cramped or overflow on phones. */
@media (max-width:900px){
  footer>div:first-of-type{gap:32px 22px!important}
}
@media (max-width:600px){
  footer{padding-top:36px!important}
  footer>div:first-of-type{padding-left:18px!important;padding-right:18px!important;gap:28px 16px!important}
  footer>div:first-of-type p{font-size:13px!important;max-width:none!important}
  footer>div:first-of-type a{font-size:13.5px!important}
  footer>div:first-of-type img{height:38px!important}
  footer>div:last-of-type>div{padding-left:18px!important;padding-right:18px!important;justify-content:center!important;text-align:center!important}
}


/* Global typography requirement: West City FC uses Montserrat everywhere. */
:root{
  --bs-font-sans-serif:'Montserrat',sans-serif;
  --bs-body-font-family:'Montserrat',sans-serif;
}
html,body,body *{
  font-family:'Montserrat',sans-serif !important;
}


/* Stable CSS-driven public navigation. Avoids rerendering the menu between hover and click.
   On mobile the same .wc-dropdown becomes a tap-to-expand accordion row instead — see the
   ".main-nav .wc-dropdown" rules in the RESPONSIVE section above, which own its mobile display. */
.wc-dropdown{display:none;}
.wc-nav-item:hover > .wc-dropdown,
.wc-nav-item:focus-within > .wc-dropdown{display:block;}

/* Montserrat is loaded from Google Fonts in PHP entry files. */
html,body,button,input,select,textarea,table,*{font-family:'Montserrat',Arial,sans-serif !important;}

/* Achievements page: vertical "journey" timeline. A center spine with a dot per
   milestone, cards alternating left/right in DOM order via nth-child (no JS index
   needed). Collapses to a single left-aligned rail with stacked cards on mobile. */
.wc-timeline{position:relative}
.wc-timeline::before{content:'';position:absolute;left:50%;top:6px;bottom:6px;width:3px;background:linear-gradient(#f5a623,#16225c);transform:translateX(-50%);z-index:0}
.wc-tl-item{position:relative;display:flex;align-items:flex-start;gap:0;margin-bottom:56px;z-index:1}
.wc-tl-item:last-child{margin-bottom:0}
.wc-tl-item:nth-child(even){flex-direction:row-reverse}
.wc-tl-dot{position:absolute;left:50%;top:34px;transform:translate(-50%,-50%);width:18px;height:18px;border-radius:50%;background:#f5a623;border:4px solid #16225c;box-shadow:0 0 0 6px #f6f7f9;z-index:2}
.wc-tl-spacer{flex:1 1 0}
.wc-tl-card{flex:0 1 460px;width:100%;background:#fff;border:1px solid #e6e9f0;overflow:hidden;box-shadow:0 10px 30px rgba(22,34,92,.07);transition:box-shadow .2s,transform .2s}
.wc-tl-card:hover{box-shadow:0 18px 44px rgba(22,34,92,.16);transform:translateY(-3px)}
.wc-tl-item:nth-child(odd) .wc-tl-card{margin-right:40px}
.wc-tl-item:nth-child(even) .wc-tl-card{margin-left:40px}
@media (max-width:760px){
  .wc-timeline::before{left:19px}
  .wc-tl-item,.wc-tl-item:nth-child(even){flex-direction:row!important;padding-left:44px}
  .wc-tl-dot{left:19px;top:34px}
  .wc-tl-spacer{display:none}
  .wc-tl-card{flex:1 1 auto;max-width:none;margin:0!important}
}