/* Gamefields theme · identity layer for the subpages that are built as custom HTML.
   Each subpage family (gfsilo, gfbrand, gfguide, gfseo, gfsub, gfcommercial, gfcatalog, gfp, gfp2) ships its own
   inline CSS and its own header bar. Here: the in-content headers and footers give way to the site header and
   footer, and colours, type, buttons and heroes follow the homepage. Loaded after everything else. */

/* ---------- tokens and type ---------- */
body.gft :is(.gfsilo,.gfbrand,.gfguide,.gfseo,.gfsub,.gfcommercial,.gfcatalog,.gfp,.gfp2){
  --p:#F4F1EE;--i:#47132D;--a:#D8F24A;--l:rgba(71,19,45,.16);
  font-family:var(--gf-font)!important;background:var(--gf-paper)!important;color:var(--gf-ink)!important}
body.gft :is(.gfsilo,.gfbrand,.gfguide,.gfseo,.gfsub,.gfcommercial,.gfcatalog,.gfp,.gfp2,.gf-os,.gf-privacy,.gf-radar-detail-page,.gf-studio-page,.gf-builder-page,.gfc-data) :is(button,input,select,textarea){font-family:inherit}
body.gft :is(.gfsilo,.gfbrand,.gfguide,.gfseo,.gfsub,.gfcommercial,.gfcatalog,.gfp,.gfp2,.gf-os,.gf-privacy,.gf-radar-detail-page,.gf-studio-page,.gfc-data){font-family:var(--gf-font)!important}
body.gft :is(#g20,#gfc2,#gfc-alerts,#gfc-b2b),body.gft :is(#g20,#gfc2,#gfc-alerts,#gfc-b2b) *{font-family:var(--gf-font)!important}
body.gft :is(.gfsilo,.gfbrand,.gfguide,.gfseo,.gfsub,.gfcommercial,.gfcatalog,.gfp,.gfp2,.gf-os,.gf-privacy,.gf-radar-detail-page,.gf-studio-page,.gfc-data) :is(h1,h2,h3,h4){
  font-family:var(--gf-font)!important;font-weight:800!important;text-transform:none!important;letter-spacing:-.045em!important;text-wrap:balance;color:inherit}
body.gft :is(.gfsilo,.gfbrand,.gfguide,.gfseo,.gfsub,.gfcommercial,.gfcatalog,.gfp,.gfp2) h1{font-size:clamp(40px,6.4vw,96px)!important;line-height:.92!important;letter-spacing:-.055em!important}
body.gft :is(.gfsilo,.gfbrand,.gfguide,.gfseo,.gfsub,.gfcommercial,.gfcatalog,.gfp,.gfp2) h2{font-size:clamp(30px,4vw,60px)!important;line-height:.98!important}
body.gft :is(.gfsilo,.gfbrand,.gfguide,.gfseo,.gfsub,.gfcommercial,.gfcatalog,.gfp,.gfp2) h3{font-size:clamp(19px,1.6vw,23px)!important;line-height:1.2!important;letter-spacing:-.02em!important}
body.gft :is(.gfsilo,.gfbrand,.gfguide,.gfseo,.gfsub,.gfcommercial,.gfcatalog,.gfp,.gfp2) p{line-height:1.6}

/* ---------- the site header and footer replace the in-content ones ---------- */
body.gft :is(.gfsilo,.gfbrand,.gfguide,.gfseo,.gfsub,.gfcommercial,.gfcatalog,.gfp,.gfp2) > .bar,
body.gft .gf-os > header:first-child,body.gft .rd-header,body.gft .gf-studio-top{display:none!important}
body.gft .gf-os > footer:last-child,body.gft .rd-footer,body.gft .gf-studio-foot,body.gft .gf-product-footer{display:none!important}

/* ---------- kicker (eye) ---------- */
body.gft :is(.gfsilo,.gfbrand,.gfguide,.gfseo,.gfsub,.gfcommercial,.gfcatalog,.gfp,.gfp2) .eye{
  font-weight:600!important;font-size:11.5px!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:var(--gf-violet)!important;opacity:1!important}

/* ---------- hero: photo with a plum veil, or the violet court when there is no photo ---------- */
body.gft :is(.gfsilo,.gfbrand,.gfguide,.gfseo,.gfsub,.gfcommercial) .hero{position:relative;isolation:isolate;color:#fff!important;background-color:var(--gf-plum)!important;background-position:center!important;background-size:cover!important}
body.gft :is(.gfsilo,.gfbrand,.gfguide,.gfseo,.gfsub,.gfcommercial) .hero[style*="background-image"]::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,rgba(28,9,18,.9) 0%,rgba(28,9,18,.7) 46%,rgba(28,9,18,.22) 100%)}
body.gft :is(.gfsilo,.gfbrand,.gfguide,.gfseo,.gfsub,.gfcommercial) .hero:not([style*="background-image"]){background:var(--gf-violet)!important}
body.gft :is(.gfsilo,.gfbrand,.gfguide,.gfseo,.gfsub,.gfcommercial) .hero:not([style*="background-image"])::before{content:"";position:absolute;inset:clamp(10px,1.6vw,22px);z-index:-1;pointer-events:none;
  border:2px solid rgba(255,255,255,.32);background:linear-gradient(rgba(255,255,255,.32),rgba(255,255,255,.32)) center/2px 100% no-repeat}
body.gft :is(.gfsilo,.gfbrand,.gfguide,.gfseo,.gfsub,.gfcommercial) .hero:not([style*="background-image"])::after{content:"";position:absolute;left:50%;top:50%;z-index:-1;pointer-events:none;
  width:min(30vw,340px);aspect-ratio:1;transform:translate(-50%,-50%);border:2px solid rgba(255,255,255,.32);border-radius:50%}
body.gft :is(.gfsilo,.gfbrand,.gfguide,.gfseo,.gfsub,.gfcommercial) .hero :is(h1,h2,p,li,span,strong,small){color:#fff!important}
body.gft :is(.gfsilo,.gfbrand,.gfguide,.gfseo,.gfsub,.gfcommercial) .hero p{color:rgba(255,255,255,.88)!important;font-size:clamp(17px,1.4vw,20px)}
body.gft :is(.gfsilo,.gfbrand,.gfguide,.gfseo,.gfsub,.gfcommercial) .hero .eye{color:var(--gf-lime)!important}
/* a stock photo that has nothing to do with sports courts is replaced by a Gamefields court */
body.gft .hero[style*="hero-pic-wide"]{background-image:url(/wp-content/uploads/2026/10/Studio-Urban-Contrast.webp)!important}

/* ---------- buttons: pills like the homepage ---------- */
body.gft :is(.gfsilo,.gfbrand,.gfguide,.gfseo,.gfsub,.gfcommercial,.gfcatalog,.gfp,.gfp2) .btn{
  display:inline-flex!important;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px!important;border-radius:999px!important;
  background:var(--gf-ink)!important;color:var(--gf-paper)!important;border:0!important;font-weight:600!important;font-size:16px!important;letter-spacing:0!important;text-transform:none!important;text-decoration:none!important;transition:transform .2s ease}
body.gft :is(.gfsilo,.gfbrand,.gfguide,.gfseo,.gfsub,.gfcommercial,.gfcatalog,.gfp,.gfp2) .btn:hover{transform:translateY(-2px)}
body.gft :is(.gfsilo,.gfbrand,.gfguide,.gfseo,.gfsub,.gfcommercial,.gfcatalog,.gfp,.gfp2) :is(.hero,.dark,.final) .btn{background:var(--gf-lime)!important;color:var(--gf-ink)!important}
body.gft :is(.gfsilo,.gfbrand,.gfguide,.gfseo,.gfsub,.gfcommercial,.gfcatalog,.gfp,.gfp2) .btn.ghost{background:transparent!important;color:inherit!important;box-shadow:inset 0 0 0 1.5px currentColor}
body.gft :is(.gfsilo,.gfbrand,.gfguide,.gfseo,.gfsub,.gfcommercial) .hero .btn.ghost{color:#fff!important}

/* ---------- section colours ---------- */
body.gft :is(.gfsilo,.gfbrand,.gfguide,.gfseo,.gfsub,.gfcommercial,.gfcatalog,.gfp,.gfp2) .dark{background:var(--gf-plum)!important;color:#F4F1EE!important;--i:#F4F1EE;--l:rgba(244,241,238,.18)}
body.gft :is(.gfsilo,.gfbrand,.gfguide,.gfseo,.gfsub,.gfcommercial,.gfcatalog,.gfp,.gfp2) .dark :is(h2,h3,p,li,span,strong,a){color:inherit}
body.gft :is(.gfsilo,.gfbrand,.gfguide,.gfseo,.gfsub,.gfcommercial,.gfcatalog,.gfp,.gfp2) .dark .eye{color:var(--gf-lime)!important}
body.gft :is(.gfsilo,.gfbrand,.gfguide,.gfseo,.gfsub,.gfcommercial,.gfcatalog,.gfp,.gfp2) .lime{background:var(--gf-lime)!important;color:var(--gf-ink)!important}
body.gft :is(.gfsilo,.gfbrand,.gfguide,.gfseo,.gfsub,.gfcommercial,.gfcatalog,.gfp,.gfp2) .final{background:var(--gf-violet)!important;color:#fff!important;--i:#fff;--l:rgba(255,255,255,.3)}
body.gft :is(.gfsilo,.gfbrand,.gfguide,.gfseo,.gfsub,.gfcommercial,.gfcatalog,.gfp,.gfp2) .final :is(h2,p){color:#fff!important}
body.gft :is(.gfsilo,.gfbrand,.gfguide,.gfseo,.gfsub,.gfcommercial,.gfcatalog,.gfp,.gfp2) .acid{background:var(--gf-lime)!important;color:var(--gf-ink)!important}

/* ---------- cards, rows, tables, callouts ---------- */
body.gft :is(.gfsilo,.gfbrand,.gfguide,.gfseo,.gfsub,.gfcommercial,.gfcatalog,.gfp,.gfp2) :is(.card,.fact,.proofcard,.project,.gf-owned-card,.spec,.use){border-radius:0!important;border-color:var(--l)!important}
body.gft :is(.gfsilo,.gfbrand,.gfguide,.gfseo,.gfsub,.gfcommercial,.gfcatalog,.gfp,.gfp2) :not(.dark):not(.final) > .w :is(.card,.fact,.proofcard){background:#fff}
body.gft :is(.gfsilo,.gfbrand,.gfguide,.gfseo,.gfsub,.gfcommercial,.gfcatalog,.gfp,.gfp2) :is(.row,.step){border-color:var(--l)!important}
body.gft .gfguide :is(.answer,.callout){background:#fff!important;border:0!important;border-left:4px solid var(--gf-lime)!important;color:var(--gf-ink)!important}
body.gft .gfguide table{border-collapse:collapse;width:100%}
body.gft .gfguide :is(th,td){border-bottom:1px solid var(--l)!important;padding:12px 10px;text-align:left}
body.gft .gfguide th{font-weight:700}
body.gft :is(.gfsilo,.gfbrand,.gfguide,.gfseo,.gfsub,.gfcommercial,.gfcatalog,.gfp,.gfp2) :is(.related,.links) a{transition:color .2s}
body.gft :is(.gfsilo,.gfbrand,.gfguide,.gfseo,.gfsub,.gfcommercial,.gfcatalog,.gfp,.gfp2) :is(.related,.links) a:hover{color:var(--gf-violet)}
body.gft :is(.gfsilo,.gfbrand,.gfguide,.gfseo,.gfsub,.gfcommercial,.gfcatalog,.gfp,.gfp2) .faq :is(summary,dt,h3){font-weight:700!important}

/* ---------- smaller templates ---------- */
body.gft :is(.gf-os,.gf-privacy,.gf-radar-detail-page,.gf-studio-page,.gfc-data){color:var(--gf-ink)}
body.gft .gf-privacy{max-width:860px;margin:0 auto;padding:clamp(24px,4vw,56px) var(--gf-gutter)}
body.gft .gf-privacy :is(h1,h2){color:var(--gf-ink)}

/* ---------- phones ---------- */
@media (max-width:600px){
  body.gft :is(.gfsilo,.gfbrand,.gfguide,.gfseo,.gfsub,.gfcommercial,.gfcatalog,.gfp,.gfp2) h1{font-size:clamp(30px,9.4vw,46px)!important;line-height:1!important;overflow-wrap:break-word;hyphens:auto}
  body.gft :is(.gfsilo,.gfbrand,.gfguide,.gfseo,.gfsub,.gfcommercial,.gfcatalog,.gfp,.gfp2) h2{font-size:clamp(26px,7.6vw,38px)!important;overflow-wrap:break-word;hyphens:auto}
  body.gft :is(.gfsilo,.gfbrand,.gfguide,.gfseo,.gfsub,.gfcommercial,.gfcatalog,.gfp,.gfp2) .btn{min-height:48px;padding:0 20px!important;font-size:15px!important}
  body.gft :is(.gfsilo,.gfbrand,.gfguide,.gfseo,.gfsub,.gfcommercial) .hero:not([style*="background-image"])::after{width:52vw}
}

/* ---------- Gamefields City project posts (inline-styled data cards) ---------- */
body.gft .gft-post .gft-prose > section[style]{max-width:860px!important;background:var(--gf-plum)!important;border-radius:0!important}
body.gft .gft-post .gft-prose > section[style] [style*="#ff8b3d"]{color:var(--gf-lime)!important}
body.gft .gft-post .gft-prose > section[style] h1{font-weight:800;letter-spacing:-.045em;color:#F4F1EE}
body.gft .gft-post .gft-prose > section[style] a{color:var(--gf-lime)}
@media (max-width:600px){
  body.gft .gft-post .gft-prose > section[style]{padding:20px!important;margin:16px 0!important}
  body.gft .gft-post .gft-prose > section[style] [style*="grid-template-columns"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.gft .gft-post .gft-prose > section[style] h1{font-size:34px!important}
}
body.gft .gft-prose{overflow-wrap:break-word}

/* ---------- Gamefields City (#g20 map, #gfc2 concept, #gfc-alerts, #gfc-b2b) ---------- */
/* light pages: paper, plum ink, violet actions */
body.gft :is(#g20,#gfc2){--bg:#F4F1EE;--ink:#47132D;--text:#47132D;--muted:#6F5A66;--orange:#6336F5;--accent:#6336F5;--line:#D9CFD4;--panel:#fff;--card:#fff;
  background:var(--gf-paper)!important;color:var(--gf-ink)!important}
/* dark pages: plum band like the homepage ball section, lime actions */
body.gft :is(#gfc-alerts,#gfc-b2b){--bg:#1C0912;--panel:#2A1220;--line:rgba(244,241,238,.18);--muted:#BBA8B1;--text:#F4F1EE;--accent:#D8F24A;
  background:var(--gf-plum)!important;color:#F4F1EE!important}
body.gft :is(#g20,#gfc2,#gfc-alerts,#gfc-b2b) :is(h1,h2,h3){font-family:var(--gf-font)!important;font-weight:800!important;letter-spacing:-.045em!important;line-height:.98!important;text-transform:none!important}
body.gft :is(#g20,#gfc2,#gfc-alerts,#gfc-b2b) h1{font-size:clamp(40px,6.4vw,96px)!important;letter-spacing:-.055em!important;line-height:.92!important}
body.gft :is(#g20,#gfc2,#gfc-alerts,#gfc-b2b) h1 em{font-style:normal;color:var(--gf-violet)}
body.gft :is(#gfc-alerts,#gfc-b2b) h1 em{color:var(--gf-lime)}
body.gft :is(#g20,#gfc2,#gfc-alerts,#gfc-b2b) :is(.btn,.c2-btn,button[class*="btn"],a[class*="btn"]){border-radius:999px!important;font-family:var(--gf-font)!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important;min-height:44px}
body.gft :is(#g20,#gfc2) :is(.btn.orange,.c2-btn.orange,.c2-btn.primary){background:var(--gf-violet)!important;color:#fff!important;border-color:var(--gf-violet)!important}
body.gft :is(#g20,#gfc2) :is(.btn.dark,.c2-btn.dark){background:var(--gf-ink)!important;color:var(--gf-paper)!important}
body.gft :is(#gfc-alerts,#gfc-b2b) :is(button,.ga-btn,.gb-btn,a[class*="btn"]){background:var(--gf-lime)!important;color:var(--gf-ink)!important;border-color:var(--gf-lime)!important}
body.gft :is(#g20,#gfc2,#gfc-alerts,#gfc-b2b) :is(input,select,textarea){border-radius:12px!important;font-family:var(--gf-font)!important}
/* the City bars become a sub-navigation under the site header, not a second sticky header */
body.gft:not(.elementor-template-canvas) :is(#g20 > .g20 > .nav,#gfc2 .c2-nav,#gfc-b2b .gb-top){position:relative!important;top:auto!important}
body.gft :is(#g20 .brand,#gfc2 .c2-brand){font-weight:800!important;letter-spacing:-.02em!important}

/* City map page: list of projects until the map is allowed */
body.gft #g20Map{position:relative}
body.gft .gft-city-fallback{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;gap:12px;padding:clamp(18px,3vw,32px);background:var(--gf-paper);overflow:auto}
body.gft .gft-city-fallback ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
body.gft .gft-city-fallback a{display:grid;gap:4px;padding:14px 16px;background:#fff;border:1px solid var(--gf-line);text-decoration:none;color:var(--gf-ink)}
body.gft .gft-city-fallback a:hover{border-color:var(--gf-violet)}
body.gft .gft-city-fallback b{font-size:17px;letter-spacing:-.02em}
body.gft .gft-city-fallback span{font-size:13px;color:var(--gf-muted)}
body.gft .gft-city-note{margin:auto 0 0;font-size:14px;color:var(--gf-muted)}
body.gft .gft-city-consent{margin-left:6px;min-height:40px;padding:0 16px;border:1.5px solid var(--gf-ink);border-radius:999px;background:transparent;color:var(--gf-ink);font:600 14px var(--gf-font);cursor:pointer}
body.gft #g20 #mapa{background:var(--gf-plum)!important}
@media (max-width:900px){
  body.gft #g20 .g20 > nav.nav,body.gft #gfc2 .c2-nav{flex-direction:column!important;align-items:flex-start!important;gap:10px!important;padding-block:14px!important}
  body.gft #g20 .g20 > nav.nav .actions,body.gft #gfc2 .c2-navlinks{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;gap:8px!important;max-width:100%;padding-bottom:2px;scrollbar-width:none}
  body.gft #g20 .g20 > nav.nav .btn,body.gft #gfc2 .c2-navlinks a{white-space:nowrap;flex:0 0 auto}
  body.gft #g20 .brand,body.gft #gfc2 .c2-brand{font-size:17px!important}
}