/* TEAMGOLDUSA R34.0.43o
   ONE TOP-LEVEL PUBLIC VISUAL SYSTEM
   Applies only to Home and exact public destinations selected by includes/header.php.
   Secondary pages keep their own compact page system.
*/

:root{
  --tg-top-max:1180px;
  --tg-top-hero-h:454px;
  --tg-top-navy:#071a33;
  --tg-top-gold:#ffc53d;
  --tg-top-soft:#f3f6fb;
  --tg-top-muted:#d7e2f0;
  --tg-top-panel:rgba(255,255,255,.10);
  --tg-top-panel-border:rgba(255,255,255,.20);
  --tg-top-panel-shadow:0 24px 60px rgba(0,0,0,.18);
  --tg-top-gradient:
    radial-gradient(circle at 83% 18%,rgba(50,113,195,.52),transparent 35%),
    linear-gradient(135deg,#152536 0%,#061d3a 50%,#07366c 100%);
}

/* ---------------------------------------------------------------
   GLOBAL TOP-LEVEL CANVAS
   --------------------------------------------------------------- */
html,
body{
  background:var(--tg-top-soft)!important;
}

.tg-breadcrumbs,
.breadcrumbs,
.ss-breadcrumbs{
  display:none!important;
}

/* Every top-level hero is literally the same outer box. */
.hero,
.tg-athlete-find-hero,
.tg-hero,
.coach-public-hero,
.role-hub-hero,
.page-hero,
.cal3-hero,
.ss-hero,
.tg-reg-hero{
  position:relative!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  width:100vw!important;
  max-width:none!important;
  height:var(--tg-top-hero-h)!important;
  min-height:var(--tg-top-hero-h)!important;
  max-height:var(--tg-top-hero-h)!important;
  margin:0 calc(50% - 50vw)!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  color:#fff!important;
  background:var(--tg-top-gradient)!important;
  box-shadow:none!important;
}

/* One wave. Same height, same color, same position everywhere. */
.hero::after,
.tg-athlete-find-hero::after,
.tg-hero::after,
.coach-public-hero::after,
.role-hub-hero::after,
.page-hero::after,
.cal3-hero::after,
.ss-hero::after,
.tg-reg-hero::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:1!important;
  left:-5%!important;
  right:-5%!important;
  bottom:-132px!important;
  height:180px!important;
  border-radius:50% 50% 0 0/100% 100% 0 0!important;
  background:var(--tg-top-soft)!important;
  pointer-events:none!important;
}

/* Standard inner canvas for hero structures that already have a wrapper. */
.hero>.container.hero-grid,
.tg-athlete-find-hero>.tg-container,
.tg-hero>.tg-container,
.page-hero>.container,
.cal3-hero>.cal3-hero-grid,
.ss-hero>.ss-hero-grid,
.tg-reg-hero>div{
  position:relative!important;
  z-index:2!important;
  box-sizing:border-box!important;
  width:100%!important;
  max-width:var(--tg-top-max)!important;
  height:100%!important;
  margin:0 auto!important;
  padding:42px 0 72px!important;
}

/* Coaches / Officials / Volunteers use the hero itself as the grid wrapper. */
.coach-public-hero,
.role-hub-hero{
  z-index:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 340px!important;
  gap:64px!important;
  align-items:center!important;
  padding:42px max(20px,calc((100vw - var(--tg-top-max))/2)) 72px!important;
}
.coach-public-hero>*,
.role-hub-hero>*{
  position:relative!important;
  z-index:2!important;
}

/* Same two-column geometry on every hero that has a right-side panel. */
.hero-grid,
.tg-athlete-find-grid,
.tg-hero-grid,
.page-hero-grid,
.cal3-hero-grid,
.ss-hero-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 340px!important;
  gap:64px!important;
  align-items:center!important;
}

/* Join is intentionally one-column after its estimator was moved below the hero. */
.tg-reg-hero>div{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
}
.tg-reg-hero>div>*{
  max-width:760px;
}

/* ---------------------------------------------------------------
   ONE TYPOGRAPHY SCALE
   --------------------------------------------------------------- */
.hero h1,
.tg-athlete-find-copy h1,
.tg-hero h1,
.coach-public-hero h1,
.role-hub-hero h1,
.page-hero h1,
.cal3-hero h1,
.ss-hero h1,
.tg-reg-hero h1{
  margin:0 0 13px!important;
  max-width:780px!important;
  color:#fff!important;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:clamp(3rem,4.2vw,3.55rem)!important;
  font-weight:900!important;
  line-height:.96!important;
  letter-spacing:-.052em!important;
}

.hero h1 span,
.tg-athlete-find-copy h1 span,
.tg-hero h1 span,
.cal3-hero h1 span,
.ss-hero h1 span,
.tg-reg-hero h1 span{
  color:var(--tg-top-gold)!important;
}

/* Same eyebrow / pill everywhere. */
.eyebrow,
.tg-eyebrow,
.tg-athlete-find-copy .tg-eyebrow,
.coach-public-eyebrow,
.role-hub-eyebrow,
.page-hero .eyebrow,
.cal3-eyebrow,
.ss-eyebrow,
.tg-reg-hero .eyebrow{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  width:auto!important;
  margin:0 0 11px!important;
  padding:6px 11px!important;
  border:1px solid rgba(255,255,255,.24)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.075)!important;
  color:#fff!important;
  font-size:.67rem!important;
  font-weight:900!important;
  line-height:1.1!important;
  letter-spacing:.105em!important;
  text-transform:uppercase!important;
}

.eyebrow::before,
.tg-eyebrow::before,
.tg-athlete-find-copy .tg-eyebrow::before,
.coach-public-eyebrow::before,
.role-hub-eyebrow::before,
.page-hero .eyebrow::before,
.cal3-eyebrow::before,
.ss-eyebrow::before,
.tg-reg-hero .eyebrow::before{
  content:""!important;
  width:7px!important;
  height:7px!important;
  flex:0 0 7px!important;
  border-radius:50%!important;
  background:var(--tg-top-gold)!important;
}

/* Same body-copy scale. */
.hero-copy,
.tg-athlete-find-copy>p:not(.tg-eyebrow),
.tg-hero-grid>div>p:not(.tg-eyebrow),
.coach-public-hero-copy>p:not(.coach-public-eyebrow),
.role-hub-hero>div>p:not(.role-hub-eyebrow),
.page-hero-grid>div>p:not(.eyebrow),
.cal3-hero-copy,
.ss-hero-copy,
.tg-reg-hero>div>p:not(.eyebrow){
  max-width:760px!important;
  margin:0!important;
  color:var(--tg-top-muted)!important;
  font-size:.96rem!important;
  line-height:1.46!important;
}

/* ---------------------------------------------------------------
   ONE RIGHT-SIDE PANEL SHELL
   --------------------------------------------------------------- */
.hero-panel,
.tg-athlete-search-card,
.tg-quick,
.coach-public-mark,
.role-hub-hero aside,
.page-hero-logo,
.cal3-quick,
.ss-quick{
  box-sizing:border-box!important;
  width:340px!important;
  height:244px!important;
  min-width:340px!important;
  min-height:244px!important;
  max-width:340px!important;
  max-height:244px!important;
  justify-self:end!important;
  align-self:center!important;
  padding:18px!important;
  border:1px solid var(--tg-top-panel-border)!important;
  border-radius:22px!important;
  background:var(--tg-top-panel)!important;
  box-shadow:var(--tg-top-panel-shadow)!important;
  color:#fff!important;
}

/* Text/card panels align their content vertically the same way. */
.hero-panel,
.tg-athlete-search-card,
.tg-quick,
.coach-public-mark,
.role-hub-hero aside,
.cal3-quick,
.ss-quick{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
}

/* DICE logo occupies the exact same panel box. */
.page-hero-logo{
  object-fit:contain!important;
  padding:34px!important;
}

/* Shared panel headings. */
.hero-panel h2,
.tg-athlete-search-card h2,
.tg-quick h2,
.cal3-quick h2,
.ss-quick h2{
  margin:0 0 9px!important;
  color:#fff!important;
  font-size:1.07rem!important;
  font-weight:900!important;
  line-height:1.15!important;
}

/* Shared quick-access cards. */
.hero-quick,
.tg-program-quick,
.cal3-quick,
.ss-quick{
  gap:6px!important;
}

.hero-quick{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.hero-quick a,
.tg-quick a,
.cal3-quick a,
.ss-quick a{
  box-sizing:border-box!important;
  min-height:36px!important;
  margin:0!important;
  padding:8px 9px!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:11px!important;
  background:rgba(255,255,255,.075)!important;
  color:#fff!important;
}
.hero-quick a:hover,
.tg-quick a:hover,
.cal3-quick a:hover,
.ss-quick a:hover{
  background:rgba(255,255,255,.14)!important;
}
.hero-quick strong,
.tg-quick strong,
.cal3-quick strong,
.ss-quick strong{
  font-size:.74rem!important;
  line-height:1.12!important;
}
.hero-quick span,
.tg-quick small,
.cal3-quick small,
.ss-quick small{
  color:#cbd8e8!important;
  font-size:.61rem!important;
  line-height:1.12!important;
}

/* Programs: 6 destinations fit the standard panel in two columns. */
.tg-program-quick{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-content:center!important;
}
.tg-program-quick h2,
.tg-program-quick-label{
  grid-column:1/-1!important;
}
.tg-program-quick h2{
  margin:0!important;
}
.tg-program-quick-label{
  margin:1px 0 0!important;
  padding:0 1px!important;
  color:var(--tg-top-gold)!important;
  font-size:.53rem!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:.09em!important;
  text-transform:uppercase!important;
}
.tg-program-quick a{
  min-height:34px!important;
}
.tg-program-quick a small{
  display:none!important;
}

/* Calendar: 9 destinations, one identical panel, compact 2-column grid. */
.cal3-quick{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-content:center!important;
}
.cal3-quick h2{
  grid-column:1/-1!important;
  margin:0!important;
}
.cal3-quick a{
  min-height:34px!important;
}
.cal3-quick a small{
  display:none!important;
}

/* Safe Sport: 2x2 grid inside the same standard panel. */
.ss-quick{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-content:center!important;
}
.ss-quick h2{
  grid-column:1/-1!important;
  margin:0!important;
}
.ss-quick a{
  min-height:44px!important;
}
.ss-quick small{
  display:none!important;
}

/* Athlete search card uses the same panel shell, without changing function. */
.tg-athlete-search-card p,
.tg-athlete-search-privacy{
  color:#cbd8e8!important;
}
.tg-athlete-search-card form{
  margin-top:8px!important;
}
.tg-athlete-search-card input{
  min-height:42px!important;
  border:1px solid rgba(255,255,255,.24)!important;
  border-radius:10px!important;
  background:#fff!important;
}
.tg-athlete-search-card button{
  min-height:42px!important;
  border-radius:10px!important;
}

/* Coach / role panels share the same centered treatment. */
.coach-public-mark,
.role-hub-hero aside{
  text-align:center!important;
}
.coach-public-mark strong,
.role-hub-hero aside strong{
  color:var(--tg-top-gold)!important;
}
.coach-public-mark small,
.role-hub-hero aside span{
  color:#d9e7f4!important;
}

/* ---------------------------------------------------------------
   ONE BUTTON SCALE
   --------------------------------------------------------------- */
.hero-actions,
.tg-actions,
.role-hub-actions,
.cal3-hero-actions,
.ss-hero-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:9px!important;
  margin-top:16px!important;
}

.hero-actions .btn,
.tg-btn,
.role-hub-actions a,
.cal3-button,
.ss-btn,
.tg-reg-hero .hero-start-button{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:42px!important;
  padding:0 16px!important;
  border-radius:999px!important;
  font-size:.78rem!important;
  font-weight:900!important;
  line-height:1!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}

.btn-primary,
.tg-btn.gold,
.role-hub-primary,
.cal3-button.primary,
.ss-btn.gold,
.tg-reg-hero .hero-start-button{
  border:1px solid var(--tg-top-gold)!important;
  background:var(--tg-top-gold)!important;
  color:var(--tg-top-navy)!important;
  box-shadow:0 10px 24px rgba(255,197,61,.22)!important;
}

.btn-secondary,
.tg-btn.ghost,
.role-hub-secondary,
.cal3-button.secondary,
.ss-btn.hero-outline{
  border:1px solid rgba(255,255,255,.35)!important;
  background:rgba(255,255,255,.075)!important;
  color:#fff!important;
}

/* Coach principle chips should not create a different hero height. */
.coach-public-principles{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:6px!important;
  margin-top:15px!important;
}
.coach-public-principles span{
  padding:5px 8px!important;
  border-radius:999px!important;
  font-size:.61rem!important;
  line-height:1!important;
}

/* ---------------------------------------------------------------
   IDENTICAL POST-HERO COLOR / TRANSITION
   --------------------------------------------------------------- */
.pathways,
.tg-athlete-experience-main,
.tg-main,
.coach-public-shell,
.role-hub-shell,
.tg-program-intro,
.dei-subnav,
.cal3-page,
.cal3-layout,
.ss-wrap,
.ss-layout,
.tg-reg-wrap,
.tg-reg-estimator-stage{
  background:var(--tg-top-soft)!important;
}

/* Keep top-level content cards white; the canvas around them is always soft. */
.coach-public-intro,
.role-hub-intro,
.tg-athlete-experience-main>*>*,
.cal3-content,
.ss-card{
  border-color:#dbe3ee;
}

/* Join estimator remains below the hero and uses the same soft canvas. */
.tg-reg-estimator-stage{
  width:100%!important;
  margin:0!important;
  padding:26px max(20px,calc((100vw - var(--tg-top-max))/2)) 8px!important;
}
.tg-reg-estimator-shell{
  width:100%!important;
  max-width:var(--tg-top-max)!important;
  margin:0 auto!important;
}
.tg-reg-estimator-shell .hero-estimator{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
}

/* ---------------------------------------------------------------
   HOME: same system, not a separate visual treatment
   --------------------------------------------------------------- */
.hero>.container.hero-grid{
  max-width:var(--tg-top-max)!important;
}
.hero-panel{
  padding:18px!important;
}
.hero-quick a span{
  display:block!important;
}

/* ---------------------------------------------------------------
   TABLET / MOBILE
   Same colors and components, natural height so content never clips.
   --------------------------------------------------------------- */
@media(max-width:940px){
  :root{--tg-top-hero-h:auto}

  .hero,
  .tg-athlete-find-hero,
  .tg-hero,
  .coach-public-hero,
  .role-hub-hero,
  .page-hero,
  .cal3-hero,
  .ss-hero,
  .tg-reg-hero{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
  }

  .hero>.container.hero-grid,
  .tg-athlete-find-hero>.tg-container,
  .tg-hero>.tg-container,
  .page-hero>.container,
  .cal3-hero>.cal3-hero-grid,
  .ss-hero>.ss-hero-grid,
  .tg-reg-hero>div{
    height:auto!important;
    padding:46px 20px 94px!important;
  }

  .coach-public-hero,
  .role-hub-hero{
    padding:46px 20px 94px!important;
  }

  .hero-grid,
  .tg-athlete-find-grid,
  .tg-hero-grid,
  .coach-public-hero,
  .role-hub-hero,
  .page-hero-grid,
  .cal3-hero-grid,
  .ss-hero-grid{
    grid-template-columns:1fr!important;
    gap:26px!important;
  }

  .hero-panel,
  .tg-athlete-search-card,
  .tg-quick,
  .coach-public-mark,
  .role-hub-hero aside,
  .page-hero-logo,
  .cal3-quick,
  .ss-quick{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    justify-self:stretch!important;
  }

  .page-hero-logo{
    min-height:210px!important;
    max-height:250px!important;
  }
}

@media(max-width:680px){
  .hero h1,
  .tg-athlete-find-copy h1,
  .tg-hero h1,
  .coach-public-hero h1,
  .role-hub-hero h1,
  .page-hero h1,
  .cal3-hero h1,
  .ss-hero h1,
  .tg-reg-hero h1{
    font-size:clamp(2.35rem,11vw,3.15rem)!important;
  }

  .hero-quick,
  .tg-program-quick,
  .cal3-quick,
  .ss-quick{
    grid-template-columns:1fr!important;
  }

  .hero-quick h2,
  .tg-program-quick h2,
  .tg-program-quick-label,
  .cal3-quick h2,
  .ss-quick h2{
    grid-column:1!important;
  }

  .hero-actions .btn,
  .tg-actions .tg-btn,
  .role-hub-actions a,
  .cal3-button,
  .ss-btn{
    width:100%!important;
  }
}

/* ================================================================
   R34.0.43p — REMOVE PRE-HERO SHELL GAP
   Coaches, Officials and Volunteers place their hero inside a legacy
   content shell whose 24px top padding created the pale strip between
   the global header and the standardized hero. Kill only that top pad.
   ================================================================ */
.coach-public-shell,
.role-hub-shell{
  padding-top:0!important;
}

/* The hero itself must touch the global navigation exactly like
   Home, Athletes, Parents, Programs, Calendar and Safe Sport. */
.coach-public-shell>.coach-public-hero,
.role-hub-shell>.role-hub-hero{
  margin-top:0!important;
}

/* Preserve the unified post-hero canvas around all top-level shells. */
.coach-public-shell,
.role-hub-shell{
  background:var(--tg-top-soft)!important;
}

/* ================================================================
   R34.0.43q — JOIN NOW: SAME TOP-LEVEL SYSTEM, FULL FUNCTION RESTORED
   Join uses the same hero shell as the other top-navigation landings.
   Its cost estimator lives immediately below the hero on the landing
   state, then disappears when the registration wizard begins.
   ================================================================ */

.tg-reg-hero>.tg-reg-hero-grid{
  position:relative!important;
  z-index:2!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 340px!important;
  gap:64px!important;
  align-items:center!important;
  width:100%!important;
  max-width:var(--tg-top-max)!important;
  height:100%!important;
  margin:0 auto!important;
  padding:42px 0 72px!important;
}

.tg-reg-hero-copy{
  min-width:0!important;
}

.tg-reg-hero-copy>p:not(.eyebrow){
  max-width:760px!important;
  margin:0!important;
  color:var(--tg-top-muted)!important;
  font-size:.96rem!important;
  line-height:1.46!important;
}

.tg-reg-hero-panel{
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  width:340px!important;
  height:244px!important;
  min-width:340px!important;
  min-height:244px!important;
  max-width:340px!important;
  max-height:244px!important;
  justify-self:end!important;
  align-self:center!important;
  padding:18px!important;
  border:1px solid var(--tg-top-panel-border)!important;
  border-radius:22px!important;
  background:var(--tg-top-panel)!important;
  box-shadow:var(--tg-top-panel-shadow)!important;
  color:#fff!important;
}

.tg-reg-panel-kicker{
  margin:0 0 6px!important;
  color:var(--tg-top-gold)!important;
  font-size:.63rem!important;
  font-weight:950!important;
  line-height:1.1!important;
  letter-spacing:.105em!important;
  text-transform:uppercase!important;
}

.tg-reg-hero-panel h2{
  margin:0 0 7px!important;
  color:#fff!important;
  font-size:1.15rem!important;
  font-weight:900!important;
  line-height:1.15!important;
}

.tg-reg-hero-panel>p:not(.tg-reg-panel-kicker){
  margin:0 0 14px!important;
  color:#cbd8e8!important;
  font-size:.75rem!important;
  line-height:1.4!important;
}

.tg-reg-hero-panel .hero-start-button{
  align-self:flex-start!important;
  margin:0!important;
}

/* Full-width soft landing canvas, aligned to every other top-level page. */
.tg-reg-wrap:not(.registration-started){
  max-width:none!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  background:var(--tg-top-soft)!important;
}

.tg-reg-estimator-stage{
  box-sizing:border-box!important;
  width:100vw!important;
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important;
  padding:26px max(20px,calc((100vw - var(--tg-top-max))/2)) 34px!important;
  background:var(--tg-top-soft)!important;
}

.tg-reg-estimator-shell{
  width:100%!important;
  max-width:var(--tg-top-max)!important;
  margin:0 auto!important;
}

.tg-reg-estimator-shell .hero-estimator{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  box-sizing:border-box!important;
  border:1px solid #dbe3ee!important;
  border-radius:20px!important;
  background:#fff!important;
  box-shadow:0 10px 32px rgba(7,26,51,.07)!important;
}

/* Started state is the registration workspace, not the public landing. */
.tg-reg-wrap.registration-started>.tg-reg-estimator-stage{
  display:none!important;
}

@media(max-width:940px){
  .tg-reg-hero>.tg-reg-hero-grid{
    grid-template-columns:1fr!important;
    gap:26px!important;
    height:auto!important;
    padding:46px 20px 94px!important;
  }

  .tg-reg-hero-panel{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    justify-self:stretch!important;
  }

  .tg-reg-estimator-stage{
    width:100%!important;
    margin:0!important;
    padding:18px 12px 28px!important;
  }
}