/* TETC High Performance — site.css (layout on top of tokens.css) v2 */

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{overflow-x:hidden}
img{max-width:100%;display:block}
.wrap{max-width:var(--tetc-max);margin:0 auto;padding:0 var(--tetc-gutter)}
.section{padding:var(--tetc-s6) 0}
.nowrap{white-space:nowrap}

/* ---- Nav ---- */
.nav{background:var(--tetc-navy);color:#fff;position:relative}
.nav .wrap{display:flex;align-items:center;gap:var(--tetc-s4);height:74px}
.nav__brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.nav__brand img{height:46px;width:auto}
.nav__brand .tetc-wordmark{color:#fff}
.nav__brand .tetc-kicker{color:var(--tetc-gold);display:block;margin-top:2px}
.nav__links{margin-left:auto;display:flex;align-items:center;gap:var(--tetc-s4)}
.nav__links a{color:#fff;font:600 13px/1 var(--tetc-font-body);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.nav__links a:hover{color:var(--tetc-gold)}
.nav__toggle{display:none;margin-left:auto;background:none;border:1px solid rgba(255,255,255,.3);color:#fff;padding:8px 12px;font-size:16px;cursor:pointer}

/* ---- Split hero ---- */
.hero{display:grid;grid-template-columns:1.05fr .95fr;min-height:600px}
.hero__left{background:var(--tetc-white);padding:var(--tetc-s6) var(--tetc-gutter);display:flex;flex-direction:column;justify-content:center;gap:var(--tetc-s2)}
.hero__rule{width:120px;height:var(--tetc-rule);background:var(--tetc-navy);position:relative;margin:6px 0 4px}
.hero__rule::after{content:"";position:absolute;left:0;top:0;width:56px;height:100%;background:var(--tetc-gold)}
.hero h1{font-size:var(--tetc-hero)}
.hero p{max-width:46ch;margin:0;color:var(--tetc-body)}
.hero__actions{display:flex;gap:var(--tetc-s2);flex-wrap:wrap;margin-top:var(--tetc-s2)}
.hero__right{position:relative;overflow:hidden;background:var(--tetc-navy)}
.hero__right img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 26%}
.hero__jersey{position:absolute;right:26px;top:50%;transform:translateY(-50%);z-index:2;display:flex;flex-direction:column;gap:2px;line-height:.9}
.hero__jersey span{font:400 44px/.9 var(--tetc-font-mark);color:#fff;
  text-shadow:1.5px 0 0 var(--tetc-gold),-1.5px 0 0 var(--tetc-gold),0 1.5px 0 var(--tetc-gold),0 -1.5px 0 var(--tetc-gold)}

/* ---- Proof band (navy) ---- */
.proof{background:var(--tetc-navy);border-bottom:5px solid var(--tetc-gold);color:#fff;padding:var(--tetc-s5) 0}
.proof__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--tetc-s4)}
.proof__num{font:900 clamp(40px,5vw,60px)/1 var(--tetc-font-display);color:#fff}
.proof__label{font:600 11px var(--tetc-font-body);letter-spacing:.18em;text-transform:uppercase;color:#9BB0D4;white-space:nowrap;margin-top:6px}

/* ---- What HP is (3 col) ---- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--tetc-s3)}
.trio__item{display:block;background:#fff;border:1px solid var(--tetc-cloud);border-top:var(--tetc-rule) solid var(--tetc-navy);padding:24px 22px;transition:transform .16s ease,border-color .16s ease,border-top-color .16s ease}
.trio__item:hover{transform:translateY(-4px);border-color:var(--tetc-navy)}
.trio .trio__item:nth-child(2){border-top-color:var(--tetc-gold)}
.trio .trio__item:hover{border-top-color:var(--tetc-gold)}
.trio .trio__item:nth-child(2):hover{border-top-color:var(--tetc-navy)}
.trio__item h3{font:900 var(--tetc-h3) var(--tetc-font-display);text-transform:uppercase;color:var(--tetc-navy);margin:0 0 8px}
.trio__item p{margin:0;color:var(--tetc-body);font-size:15.5px}
.section-title{font:900 var(--tetc-h2) var(--tetc-font-display);text-transform:uppercase;color:var(--tetc-navy);margin:6px 0 26px;position:relative}

/* ---- Section head ---- */
.shead{display:flex;align-items:baseline;justify-content:space-between;gap:var(--tetc-s3);margin-bottom:var(--tetc-s3);flex-wrap:wrap}
.shead h2{font-size:var(--tetc-h2)}
.asof{font:400 12.5px var(--tetc-font-body);color:var(--tetc-muted);white-space:nowrap}

/* ---- Results table (uses tetc-table from tokens) ---- */
.tbl-wrap{border:var(--tetc-border);overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl-wrap .tetc-table{min-width:480px}
.tetc-table td.place{white-space:nowrap;font-weight:700;color:var(--tetc-navy)}
.tetc-table .star{color:var(--tetc-gold)}

/* ---- Coach block (navy) ---- */
.coach{background:var(--tetc-navy);color:#fff}
.coach .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--tetc-s5);align-items:center;padding:var(--tetc-s6) var(--tetc-gutter)}
.coach__photo{aspect-ratio:4/5;background:var(--tetc-navy-deep);position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.14)}
.coach__photo .ph{position:absolute;inset:0;display:grid;place-content:center;gap:10px;justify-items:center}
.coach__photo .ph img{height:64px;opacity:.9}
.coach__photo .ph .init{font:900 88px var(--tetc-font-display);color:#fff}
.coach h2{color:#fff}
.coach .tetc-kicker{color:var(--tetc-gold)}
.coach p{color:#C6D3E6}

/* ---- Footer ---- */
.tetc-footer a{color:var(--tetc-gold)}

/* ---- Button motion (kit-safe: movement + colour, no shadows) ---- */
.tetc-btn{transition:transform .16s ease, background .16s ease, color .16s ease, border-color .16s ease}
.tetc-btn:hover{transform:translateY(-3px)}
.tetc-btn:active{transform:translateY(-1px)}
.tetc-btn--gold:hover{background:#ffd21f}
.tetc-btn:not(.tetc-btn--gold):not(.tetc-btn--secondary):hover{background:var(--tetc-royal)}
.tetc-btn--secondary:hover{background:var(--tetc-navy);color:#fff}
.chip{transition:transform .14s ease, background .14s ease, color .14s ease, border-color .14s ease}
.chip:hover{transform:translateY(-2px);border-color:var(--tetc-navy)}
.ath-card{transition:transform .16s ease, border-color .16s ease}
.ath-card:hover{transform:translateY(-3px)}

/* ---- Buttons on dark ---- */
.hero__right,.proof,.coach{position:relative}

/* ---- Demo flag ---- */
.flag{position:fixed;left:14px;bottom:14px;z-index:60;background:var(--tetc-gold);color:var(--tetc-navy);font:700 11px var(--tetc-font-body);letter-spacing:.1em;text-transform:uppercase;padding:8px 14px;white-space:nowrap}

/* ---- Reveal ---- */
.reveal{opacity:0;transform:translateY(14px)}
.reveal.in{opacity:1;transform:none;transition:opacity .5s,transform .5s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ---- Responsive ---- */
@media(max-width:900px){
  .nav__links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--tetc-navy);padding:8px 0;z-index:40}
  .nav__links.open{display:flex}
  .nav__links a{padding:13px var(--tetc-gutter);width:100%}
  .nav__toggle{display:inline-block}
  .hero{grid-template-columns:1fr}
  .hero__right{min-height:340px}
  .proof__grid{grid-template-columns:repeat(2,1fr);gap:var(--tetc-s3)}
  .trio{grid-template-columns:1fr}
  .coach .wrap{grid-template-columns:1fr}
  .coach__photo{max-width:320px}
}

/* ================================================================
   v2.1 — MOBILE LAYOUT HARDENING (July 25 2026)
   Root cause of the "off-centre" pages (portal especially): CSS grid
   children default to min-width:auto, so one nowrap kicker or one
   min-width table forces the WHOLE document wider than the viewport.
   html/body overflow-x:hidden then hid the scrollbar but not the shift,
   so centred elements (the portal login card) rendered off-centre.
   Measured before: portal 506px / athletes 787px / home 483px canvas
   inside a 390px viewport.
   ================================================================ */
.proof__grid > *, .trio > *, .split2 > *, .dash > *, .rail > *,
.ath-grid > *, .week > *, .sixe > *, .prof-hero__grid > *,
.coach .wrap > *, .qstats > *, .prof-stats > * { min-width: 0; }
.tbl-wrap { max-width: 100%; }
.ath-card__name { overflow-wrap: anywhere; }
.ath-card__top > div { min-width: 0; }        /* flex child also defaults to min-width:auto */
.ath-card .tetc-kicker { white-space: normal; } /* long discipline strings must wrap inside a card */

@media (max-width: 900px) {
  /* brand nowrap rules relax once the screen is narrow */
  .proof__label, .tetc-stat__label { white-space: normal; }
  .ath-card .pill-live, .ath-card .view { white-space: normal; }
  .nav__toggle { min-width: 44px; min-height: 44px; }  /* touch target */
  .login { padding: var(--tetc-s5) var(--tetc-gutter); }
}

@media (max-width: 620px) {
  .ath-grid, .week, .sixe { grid-template-columns: 1fr; }
  .tbl-wrap .tetc-table { min-width: 420px; }
  .ath-card__cta { flex-wrap: wrap; gap: 8px; }
  .flag { font-size: 10px; padding: 6px 10px; opacity: .94; pointer-events: none; }
  .qmodal { padding: 12px; }
}

/* ================================================================
   MAIN-SITE LINK-BACKS  (Sal, 19 Aug 2026)
   "we should have more links back to the main site... it should be easy
    to find the main Thorold Elite site. Make the back-link out of the
    High Performance page more obvious, likely the logo in the header
    rather than the small footer link."

   The main club site now links here officially at
   https://highperformance.thoroldelitetc.ca, so the relationship has to
   read both ways. Three link-backs, in descending prominence:
     1. .clubstrip  — a slim band above the nav on every page
     2. .nav__brand — the crest and wordmark now point at the club site
                      (the crest is the CLUB's crest, not HP's). "Home"
                      in the nav is still the HP home page, so nobody
                      loses their way back.
     3. .foot-main  — the footer link, now named in full
   ================================================================ */
.clubstrip{background:#16224F;border-bottom:1px solid rgba(255,255,255,.12)}
.clubstrip .wrap{display:flex;align-items:center;min-height:32px}
.clubstrip a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font:600 11.5px/1 var(--tetc-font-body);letter-spacing:.12em;text-transform:uppercase;
  color:#C6D3E6;padding:9px 0;transition:color .16s ease}
.clubstrip a:hover{color:var(--tetc-gold)}
.clubstrip__ar{font-size:13px;line-height:1;transition:transform .16s ease}
.clubstrip a:hover .clubstrip__ar{transform:translateX(-3px)}
.clubstrip__url{color:var(--tetc-gold);letter-spacing:.06em;text-transform:none;font-weight:700}
@media(max-width:560px){
  .clubstrip a{font-size:10.5px;letter-spacing:.08em}
  .clubstrip__url{display:none}
}
/* the outbound arrow on the header wordmark */
.nav__ext{font-size:.62em;line-height:1;vertical-align:super;margin-left:5px;
  color:var(--tetc-gold);font-weight:700}
/* footer link, named in full rather than "Main club site" */
.tetc-footer .foot-main{font-weight:700;text-decoration:underline;text-underline-offset:3px}