/*
Theme Name: Von Sports Group
Theme URI: https://www.vonsportsgroup.com
Author: Von Sports Group LLC
Description: Custom theme for Von Sports Group. Built to instruction VSG-WEB-2026-07-27 Rev. 1.
Version: 2.1
License: GPL v2 or later
Text Domain: vsg
*/

/* ─────────────────────────────────────────────────────────────────────────
   COMPLIANCE NOTE FOR ANY FUTURE DEVELOPER
   The footer disclosure, the consent block, and the nine service disclosures
   are defined ONCE in functions.php as PHP constants and arrays. They are not
   editable from the WordPress admin, by design. Do not duplicate that text
   into page content, widgets, or blocks — it must not be able to drift.
   Disclosure blocks must render visibly on page load. Never place one inside
   an accordion, modal, tab, or "read more" toggle.
   ───────────────────────────────────────────────────────────────────────── */


:root{
  --ink:#0A0F16;--ink2:#070B10;--navy:#10263E;--wash:#131A23;
  --mute:#7E8A97;--line:rgba(255,255,255,.15);--line2:rgba(255,255,255,.09);
  --f:"Archivo",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --s:"Newsreader",Georgia,serif;--gut:clamp(20px,4vw,64px);--ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:#fff;font:400 16px/1.62 var(--f)}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
:focus-visible{outline:2px solid #fff;outline-offset:4px}
.skip{position:absolute;left:-9999px;background:#fff;color:var(--ink);padding:12px 18px;z-index:400}
.skip:focus{left:0;top:0}
.w{max-width:1500px;margin:0 auto;padding:0 var(--gut)}
.big{font-weight:500;letter-spacing:-.04em;line-height:.96;margin:0;text-wrap:balance}
.big i{font-family:var(--s);font-style:italic;font-weight:300;letter-spacing:-.02em}
.eb{font:500 10.5px/1 var(--f);letter-spacing:.24em;text-transform:uppercase;display:block;color:rgba(255,255,255,.6)}
p{margin:0 0 1.15em;max-width:66ch;color:rgba(255,255,255,.82)}
h2.big{font-size:clamp(1.6rem,3.8vw,2.9rem)}
h3.big{font-size:clamp(1.15rem,2vw,1.5rem)}

.nav{position:fixed;inset:0 0 auto 0;z-index:120;background:linear-gradient(180deg,rgba(10,15,22,.9),rgba(10,15,22,0))}
.nav.solid{background:var(--ink2);border-bottom:1px solid var(--line2)}
.nav .w{display:flex;align-items:center;min-height:76px;gap:clamp(12px,1.7vw,28px)}
.mk{font:500 15px/1.1 var(--f);letter-spacing:-.02em;margin-right:auto;white-space:nowrap}
.svc{display:flex;gap:clamp(11px,1.4vw,22px);list-style:none;margin:0;padding:0}
.svc a{font:500 11.5px/1 var(--f);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.78);
  padding:8px 0;border-bottom:1px solid transparent;transition:.25s;white-space:nowrap}
.svc a:hover,.svc a[aria-current=page]{color:#fff;border-bottom-color:#fff}
.cta-n{font:500 11.5px/1 var(--f);letter-spacing:.1em;text-transform:uppercase;border:1px solid rgba(255,255,255,.5);
  padding:11px 18px;transition:.25s;white-space:nowrap}
.cta-n:hover{background:#fff;color:var(--ink)}
.burger{display:none;background:none;border:1px solid rgba(255,255,255,.5);color:#fff;padding:10px 15px;
  font:500 11px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
@media(max-width:1240px){.svc{gap:11px}.svc a{font-size:10.5px;letter-spacing:.03em}}
@media(max-width:1000px){.svc,.cta-n{display:none}.burger{display:block}}
.ov{position:fixed;inset:0;z-index:119;background:var(--navy);display:flex;align-items:center;overflow-y:auto;
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease)}
.ov.on{clip-path:inset(0 0 0 0)}
.ov ol{list-style:none;margin:0;padding:96px 0 56px;counter-reset:n;width:100%}
.ov li{counter-increment:n;border-top:1px solid var(--line)}
.ov li:last-child{border-bottom:1px solid var(--line)}
.ov a{display:flex;align-items:baseline;gap:clamp(14px,3vw,36px);padding:clamp(8px,1.3vw,15px) 0;transition:padding-left .4s var(--ease)}
.ov a:hover{padding-left:20px}
.ov a::before{content:"0" counter(n);font:500 11px/1 var(--f);letter-spacing:.14em;color:rgba(255,255,255,.4);flex:none}
.ov .nm{font-weight:500;font-size:clamp(1.3rem,3.8vw,2.4rem);letter-spacing:-.04em;line-height:1}
.ov a:hover .nm i{font-family:var(--s);font-style:italic}

/* NOTE: the single-file prototype used .page as a JS router class with
   display:none. WordPress body_class() emits "page" on every static page, so
   that rule hid the entire document. Removed. Do not reintroduce a bare .page
   rule — scope any such class as .vsg-page instead. */
.hero{position:relative;display:flex;align-items:flex-end;overflow:hidden}
.hero--f{min-height:100svh;padding:0 0 clamp(44px,6vw,86px)}
.hero--p{min-height:60svh;padding:clamp(118px,15vw,178px) 0 clamp(36px,5vw,62px)}
.hero .bg{position:absolute;inset:0}
.hero .bg img{transform:scale(1.03)}
/* Scrim over hero photography. Deepened at the foot because the headline and
   eyebrow sit lower-left; several of the supplied images are bright there.
   If a future image renders text hard to read, deepen the last stop rather
   than adding a per-page override. */
.hero .bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,15,22,.72),rgba(10,15,22,.34) 38%,rgba(10,15,22,.96))}
/* extra wash from the left so the headline never sits on a bright edge */
.hero .bg::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(10,15,22,.55),rgba(10,15,22,0) 62%)}
.hero .w{position:relative;z-index:2;width:100%}
.hero--f h1{font-size:clamp(2.4rem,7.4vw,7rem);max-width:15ch}
.hero--p h1{font-size:clamp(2rem,5.2vw,4.4rem);max-width:18ch}
.hero .eb{margin-bottom:clamp(16px,2.4vw,28px)}
.wd{display:inline-block;overflow:hidden;vertical-align:bottom}
.wd>span{display:inline-block}
html.js .wd>span{transform:translateY(106%);transition:transform 1.05s var(--ease)}
html.js .lit .wd>span{transform:none}
.go{display:inline-flex;align-items:center;gap:14px;font:500 12px/1 var(--f);letter-spacing:.16em;text-transform:uppercase;
  border:0;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:9px;transition:gap .3s,border-color .3s;background:none;color:#fff;cursor:pointer}
.go:hover{gap:24px;border-bottom-color:#fff}
.hero--f .go{margin-top:clamp(26px,4vw,44px)}

.blk{position:relative;min-height:86svh;display:flex;align-items:flex-end;padding:clamp(40px,6vw,80px) 0;overflow:hidden;border-top:1px solid var(--line2)}
.blk .bg{position:absolute;inset:0}
.blk .bg img{transition:transform 1.3s var(--ease)}
.blk:hover .bg img{transform:scale(1.05)}
.blk .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,15,22,.28),rgba(10,15,22,.92))}
.blk .w{position:relative;z-index:2}
.blk h2{font-size:clamp(1.9rem,5.2vw,4.4rem);max-width:13ch}
.blk .eb{margin-bottom:16px}.blk .go{margin-top:clamp(20px,3vw,34px)}

.sec{padding:clamp(56px,8vw,120px) 0;border-top:1px solid var(--line2)}
.sec--w{background:#fff;color:var(--ink);border-top:0}
.sec--w p{color:#3D4855}.sec--w .eb{color:var(--mute)}
.sub{padding:clamp(46px,6vw,84px) 0;border-top:1px solid var(--line2);scroll-margin-top:84px}
.subnav{position:sticky;top:76px;z-index:40;background:var(--ink2);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.subnav ul{display:flex;gap:24px;list-style:none;margin:0;padding:15px 0;overflow-x:auto}
.subnav a{font:500 10.5px/1 var(--f);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.subnav a:hover{color:#fff}
.list{list-style:none;padding:0;margin:1.1em 0 1.7em;max-width:66ch}
.list li{padding:14px 0 14px 26px;border-bottom:1px solid var(--line2);position:relative;color:rgba(255,255,255,.82)}
.list li::before{content:"";position:absolute;left:0;top:1.2em;width:12px;height:1px;background:var(--mute)}
.bx{list-style:none;padding:0;margin:1.2em 0 1.8em;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--line2);border:1px solid var(--line2)}
.bx li{background:var(--ink);padding:20px 22px;font-size:.97rem}

/* ── PAGE-LEVEL DISCLOSURE, RECESSIVE ─────────────────────────────────────
   Small, grey, no box or rule. Present on the page and readable, but carrying
   minimal visual weight. Full text lives on /disclosures/.
   Do not set display:none, visibility:hidden, or move this into an accordion
   or modal — a disclosure that is not visible on load is not a disclosure.
   12px is the floor; do not reduce further.                                */
.fine{margin:3em 0 0;max-width:78ch;border-top:1px solid rgba(255,255,255,.06);padding-top:16px}
.fine p{font-size:12px;line-height:1.62;color:rgba(255,255,255,.42);margin:0 0 .7em;max-width:none;
  letter-spacing:.005em}
.fine p:last-child{margin:0}
.fine a{color:rgba(255,255,255,.58);border-bottom:1px solid rgba(255,255,255,.2);
  padding-bottom:1px;transition:color .25s,border-color .25s}
.fine a:hover{color:#fff;border-color:rgba(255,255,255,.6)}


/* ── NEWS FEED ────────────────────────────────────────────────────────────
   Rows, not cards. A curated link list should read like a wire, and rows
   scale to any number of items without leaving a ragged grid.              */
.feed{list-style:none;margin:0;padding:0;border-top:1px solid var(--line2)}
.feed li{border-bottom:1px solid var(--line2)}
.feed a{display:grid;grid-template-columns:1fr auto;gap:4px clamp(16px,2.4vw,40px);
  align-items:baseline;padding:clamp(20px,2.4vw,30px) 0;transition:padding-left .35s var(--ease)}
.feed a:hover{padding-left:12px}
.feed .meta{grid-column:1/-1;display:flex;gap:14px;align-items:center;
  font:500 10px/1 var(--f);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.feed .src{padding-left:14px;border-left:1px solid var(--line2)}
.feed .hl{font-weight:500;font-size:clamp(1.05rem,2.1vw,1.5rem);letter-spacing:-.03em;line-height:1.24;
  color:#fff;max-width:44ch}
.feed .note{grid-column:1;font-size:14px;line-height:1.6;color:var(--mute);margin-top:10px;max-width:56ch}
.feed .arw{grid-row:2;grid-column:2;font-size:19px;color:var(--mute);transition:color .3s,transform .3s}
.feed a:hover .arw{color:#fff;transform:translateX(3px)}
@media(max-width:640px){.feed .hl{font-size:1.05rem}.feed a{grid-template-columns:1fr}
  .feed .arw{grid-column:1;grid-row:auto;margin-top:10px}}

/* legal pages */
.legal .meta{font:500 11px/1.5 var(--f);letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);margin:0 0 2.4em}
.legal h2.big{font-size:clamp(1.15rem,2.1vw,1.5rem);margin:2.4em 0 .7em}
.legal h2.big:first-of-type{margin-top:0}
.legal p{font-size:15.5px;line-height:1.78;color:rgba(255,255,255,.82);max-width:74ch}
.legal ul.list{margin:1em 0 1.6em;padding-left:1.1em;max-width:74ch}
.legal ul.list li{font-size:15.5px;line-height:1.75;color:rgba(255,255,255,.82);margin-bottom:.5em}
.legal strong{color:#fff;font-weight:500}
.legal a{color:#fff;border-bottom:1px solid rgba(255,255,255,.35)}

/* editor-only warning on posts missing a disclosure assignment */
.ednote{border-left:2px solid #C9772F;background:rgba(201,119,47,.08);padding:18px 22px;margin:2.2em 0;max-width:76ch}
.ednote p{font-size:14px;line-height:1.65;margin:8px 0 0;color:rgba(255,255,255,.85)}

/* full text on the disclosures page stays fully legible */
.legal .disc-full{margin:0 0 2.6em}
.legal .disc-full p{font-size:15px;line-height:1.75;color:rgba(255,255,255,.82)}

.form{border:1px solid var(--line2);background:var(--wash);padding:clamp(24px,4vw,46px);margin-top:2em;max-width:860px}
.fld{margin-bottom:22px}
.fld label{display:block;font:500 10px/1 var(--f);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:9px}
.fld input,.fld select,.fld textarea{width:100%;padding:14px;border:1px solid var(--line2);border-radius:0;background:var(--ink2);font:400 15px var(--f);color:#fff}
.fld textarea{min-height:120px;resize:vertical}
.fld .hint{font-size:.83rem;color:var(--mute);margin:9px 0 0;max-width:none}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.chk{display:flex;gap:12px;align-items:flex-start;margin-bottom:18px}
.chk input{flex:none;width:18px;height:18px;margin-top:3px;accent-color:#fff}
.chk label{font:400 14px/1.62 var(--f);text-transform:none;letter-spacing:0;color:rgba(255,255,255,.86);margin:0}
.note{border-left:2px solid var(--mute);background:var(--ink2);padding:15px 18px;margin:0 0 22px;font-size:14px;line-height:1.62;color:rgba(255,255,255,.8)}
.hidden{display:none}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,30px)}
.card{border:1px solid var(--line2);background:var(--wash);display:flex;flex-direction:column;transition:transform .35s var(--ease)}
.card:hover{transform:translateY(-5px)}
.card .shot{aspect-ratio:16/10;overflow:hidden}
.card .bd{padding:clamp(18px,2.2vw,26px);flex:1;display:flex;flex-direction:column}
.card .mt{font:500 10px/1 var(--f);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:12px}
.card p{font-size:14px;color:var(--mute);margin:0 0 18px}
.card .go{margin-top:auto;border-bottom-color:var(--line)}
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,44px)}
.mem{display:flex;flex-direction:column}
.mem .shot{aspect-ratio:3/4;overflow:hidden;margin-bottom:18px;display:block}
/* placeholder tile — logo centred on navy until real headshots are supplied */
.mem .shot--ph{background:#31383F;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line2)}
.mem .shot--ph img{width:70%;height:auto;object-fit:contain}
.mem strong{display:block;font:500 17px/1.2 var(--f);letter-spacing:-.01em}
.mem span{display:block;font:500 10px/1.5 var(--f);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:8px 0 12px}
.mem p{font-size:14px;color:var(--mute);margin:0}
.ptn{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line2);border:1px solid var(--line2)}
.ptn-card{background:var(--ink);padding:clamp(26px,3vw,42px);display:flex;flex-direction:column;
  transition:background .3s;min-height:100%}
.ptn-card:hover{background:var(--wash)}
.ptn-card strong{display:block;font:500 clamp(1.1rem,1.8vw,1.45rem)/1.2 var(--f);letter-spacing:-.02em;margin-bottom:16px}
/* wider measure so descriptions of different lengths sit on similar line counts */
.ptn-card .role{display:block;font:500 10px/1.5 var(--f);letter-spacing:.18em;text-transform:uppercase;
  color:var(--mute);margin:-8px 0 18px}
.ptn-card p{font-size:14.5px;line-height:1.68;color:var(--mute);margin:0 0 30px;max-width:none;flex:1}

/* centred closing block — partners page */
.close-c{text-align:center;padding:clamp(64px,9vw,130px) 0;border-top:1px solid var(--line2)}
.close-c .inner{max-width:720px;margin:0 auto}
.close-c .big{font-size:clamp(1.8rem,4.6vw,3.4rem);margin-bottom:20px}
.close-c p{margin:0 auto 34px;max-width:52ch}
.close-c .btn-rect{align-self:auto;margin:0 auto}

/* rectangular connect button — identical size on every card */
.btn-rect{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;
  min-width:168px;padding:15px 26px;border:1px solid rgba(255,255,255,.45);
  font:500 11px/1 var(--f);letter-spacing:.18em;text-transform:uppercase;color:#fff;
  background:transparent;transition:background .25s,color .25s,border-color .25s}
.btn-rect:hover{background:#fff;color:var(--ink);border-color:#fff}
.article{max-width:780px}
.article .lede{font-size:1.16rem;line-height:1.62;color:#fff;font-weight:500;margin-bottom:26px;max-width:60ch}
.article p{font-size:1.02rem;line-height:1.78}
.legal{max-width:780px}
.legal h2{font-size:clamp(1.1rem,1.8vw,1.35rem);margin:2em 0 .6em}
.legal p,.legal li{font-size:15px;line-height:1.75;color:rgba(255,255,255,.8)}
.legal ul{padding-left:20px}.legal li{margin-bottom:8px}

.ft{border-top:1px solid var(--line2);padding:clamp(46px,6vw,74px) 0 46px}
.fg{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding-bottom:40px}
.fg h4{font:500 10px/1 var(--f);letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.45);margin:0 0 15px}
.fg ul{list-style:none;margin:0;padding:0}.fg li{margin-bottom:9px}
.fg a{font-size:13.5px;color:rgba(255,255,255,.8)}.fg a:hover{color:#fff;text-decoration:underline}
.fg address{font-style:normal;font-size:13.5px;line-height:1.8;color:rgba(255,255,255,.8)}
.dis{border-top:1px solid var(--line2);padding-top:32px;display:grid;grid-template-columns:120px 1fr;gap:26px}
.dis span{font:500 10px/1 var(--f);letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.dis p{font:400 13.5px/1.75 var(--f);color:rgba(255,255,255,.68);margin:0;max-width:none}

/* SCROLL REVEAL — MUST DEGRADE GRACEFULLY.
   Content is visible by default. The hidden state only applies when JS is
   confirmed running (html.js is set by an inline script in header.php).
   Previously .rv defaulted to opacity:0, so any JS failure — a script error,
   a host's asset optimiser, a blocked request — rendered the page blank.
   Never make content depend on JS to become visible. */
.rv{opacity:1;transform:none}
html.js .rv{opacity:0;transform:translateY(24px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.js .rv.in{opacity:1;transform:none}
@media(max-width:1000px){.cards,.team{grid-template-columns:repeat(2,1fr)}.ptn{grid-template-columns:1fr}}
@media(max-width:860px){.fg{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.dis{grid-template-columns:1fr;gap:12px}}
@media(max-width:640px){.g2{grid-template-columns:1fr}.cards,.team,.ptn{grid-template-columns:1fr}
  .btn-rect{width:100%}}
@media(max-width:520px){.fg{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.rv{opacity:1!important;transform:none!important}.wd>span{transform:none!important}}


/* WordPress admin bar */
body.admin-bar .nav{top:32px}
@media screen and (max-width:782px){body.admin-bar .nav{top:46px}}
.wp-caption,.gallery-caption,.bypostauthor{margin-bottom:1em}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.alignleft{float:left;margin-right:1.5em}
.alignright{float:right;margin-left:1.5em}
.aligncenter{margin-left:auto;margin-right:auto}

/* WordPress menu markup */
.ov ol.ovmenu{list-style:none;margin:0;padding:96px 0 56px;counter-reset:n;width:100%}
.ov ol.ovmenu li{counter-increment:n;border-top:1px solid var(--line)}
.ov ol.ovmenu li:last-child{border-bottom:1px solid var(--line)}
.ov ol.ovmenu a{display:flex;align-items:baseline;gap:clamp(14px,3vw,36px);padding:clamp(8px,1.3vw,15px) 0;transition:padding-left .4s var(--ease)}
.ov ol.ovmenu a::before{content:"0" counter(n);font:500 11px/1 var(--f);letter-spacing:.14em;color:rgba(255,255,255,.4);flex:none}
.ov ol.ovmenu a .nm,.ov ol.ovmenu a{font-weight:500;font-size:clamp(1.3rem,3.8vw,2.4rem);letter-spacing:-.04em;line-height:1}
.svc li{list-style:none}
.nav ul.svc{display:flex;gap:clamp(11px,1.4vw,22px);list-style:none;margin:0;padding:0}
.current-menu-item > a{color:#fff!important;border-bottom-color:#fff!important}