/*
 * THE MOMENTUM STANDARD - primary website lockup
 * Staged 2026-09-15 from TMS_Website_Logo_Handover_Pack.zip.
 * Brand-only update: no page colour tokens are changed here.
 *
 * Approved reference:
 * - Desktop combined lockup image height: 50px
 * - Tablet combined lockup image height: 43px
 * - Mobile combined lockup image height: 36px
 * - Do not recreate/retype/stretch the mark or wordmark.
 * - If navigation is crowded, collapse navigation earlier rather than shrinking the logo.
 */
:root{
  --tms-primary-lockup:url('brand/tms-primary-lockup.webp');
  --tms-primary-lockup-h:50px;
  --tms-primary-lockup-ratio:4.82; /* optimised delivery asset, preserves the supplied 4.82 ratio */
}

/* Standard public headers, Momentum app headers and legacy TMS headers. */
.header .wordmark,
.momentum-header .momentum-wordmark,
.tms-header .tms-wordmark{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:0!important;
  min-width:0!important;
  text-decoration:none!important;
  color:inherit;
}

/* Keep the existing semantic brand text in the DOM but use the supplied artwork visually. */
.header .wordmark > *,
.momentum-header .momentum-wordmark > *,
.tms-header .tms-wordmark > *{
  display:none!important;
}

.header .wordmark::before,
.momentum-header .momentum-wordmark::before,
.tms-header .tms-wordmark::before{
  content:"";
  display:block;
  width:calc(var(--tms-primary-lockup-h) * var(--tms-primary-lockup-ratio));
  height:var(--tms-primary-lockup-h);
  flex:0 0 auto;
  background-image:var(--tms-primary-lockup);
  background-repeat:no-repeat;
  background-position:left center;
  background-size:contain;
}

/* The coaching portal supports a true dark theme, so present the approved lockup in white there. */
html.portal-dark .header .wordmark::before{filter:invert(1);}

/* Handover instruction: collapse crowded desktop navigation before shrinking the brand. */
@media(max-width:1279px){
  .header:has(.menu-button){grid-template-columns:minmax(0,1fr) auto!important;}
  .header:has(.menu-button) .nav,
  .header:has(.menu-button) .community-button{display:none!important;}
  .header:has(.menu-button) .menu-button{display:block!important;}

  .momentum-header:has(.momentum-menu-button),
  .momentum-header:has(.momentum-mobile-menu){grid-template-columns:minmax(0,1fr) auto!important;}
  .momentum-header:has(.momentum-menu-button) .momentum-nav,
  .momentum-header:has(.momentum-menu-button) .momentum-global-nav,
  .momentum-header:has(.momentum-menu-button) .momentum-community-button,
  .momentum-header:has(.momentum-mobile-menu) .momentum-global-nav,
  .momentum-header:has(.momentum-mobile-menu) .momentum-desktop-actions{display:none!important;}
  .momentum-header:has(.momentum-menu-button) .momentum-menu-button,
  .momentum-header:has(.momentum-mobile-menu) .momentum-mobile-menu{display:block!important;}

  .tms-header:has(.tms-menu-button){grid-template-columns:minmax(0,1fr) auto!important;}
  .tms-header:has(.tms-menu-button) .tms-nav,
  .tms-header:has(.tms-menu-button) .tms-community{display:none!important;}
  .tms-header:has(.tms-menu-button) .tms-menu-button{display:block!important;}
}

@media(max-width:1099px){
  :root{--tms-primary-lockup-h:43px;}
}

@media(max-width:767px){
  :root{--tms-primary-lockup-h:36px;}
  .header .wordmark,
  .momentum-header .momentum-wordmark,
  .tms-header .tms-wordmark{
    padding-left:20px!important;
    padding-right:12px!important;
  }
}

/* Homepage: direct 1:1 coaching entry point, using the existing site palette. */
.hero-cta-row .hero-portal-button{
  flex:0 1 210px;
  background:var(--clay);
  border-color:var(--clay);
  color:var(--white);
}
.hero-cta-row .hero-portal-button:hover,
.hero-cta-row .hero-portal-button:focus-visible{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper);
}

/* Coaching portal: larger coach-side program-builder text without changing the client app. */
body:has(#builderWrap):not(.client-mode) .lead{font-size:clamp(18px,1.45vw,22px);line-height:1.55}
body:has(#builderWrap):not(.client-mode) .copy{font-size:14px;line-height:1.6}
body:has(#builderWrap):not(.client-mode) .eyebrow{font-size:11px}
body:has(#builderWrap):not(.client-mode) .section-label,
body:has(#builderWrap):not(.client-mode) .consultation-label{font-size:10px}
body:has(#builderWrap):not(.client-mode) .field label,
body:has(#builderWrap):not(.client-mode) .limitation-detail-grid label,
body:has(#builderWrap):not(.client-mode) .builder-recommend label,
body:has(#builderWrap):not(.client-mode) .builder-control label,
body:has(#builderWrap):not(.client-mode) .builder-exercise-row label{font-size:9px;line-height:1.35}
body:has(#builderWrap):not(.client-mode) .field input,
body:has(#builderWrap):not(.client-mode) .field select{font-size:19px}
body:has(#builderWrap):not(.client-mode) .field textarea,
body:has(#builderWrap):not(.client-mode) .formgrid textarea{font-size:15px;line-height:1.55}
body:has(#builderWrap):not(.client-mode) .btn{font-size:12px;padding:15px 21px}
body:has(#builderWrap):not(.client-mode) .mini{font-size:9.5px;padding:9px 11px}
body:has(#builderWrap):not(.client-mode) .choice small,
body:has(#builderWrap):not(.client-mode) .split-choice small,
body:has(#builderWrap):not(.client-mode) .toggle small{font-size:11px;line-height:1.5}
body:has(#builderWrap):not(.client-mode) .builder-recommend p,
body:has(#builderWrap):not(.client-mode) .builder-control small,
body:has(#builderWrap):not(.client-mode) .builder-manual-intro p,
body:has(#builderWrap):not(.client-mode) .builder-template-head p{font-size:12px;line-height:1.55}
body:has(#builderWrap):not(.client-mode) .builder-day-head h3{font-size:28px}
body:has(#builderWrap):not(.client-mode) .builder-exercise-row>div small{font-size:9.5px;line-height:1.4}
body:has(#builderWrap):not(.client-mode) .builder-exercise-row input,
body:has(#builderWrap):not(.client-mode) .builder-exercise-row select{font-size:14px;line-height:1.35}
body:has(#builderWrap):not(.client-mode) .builder-check-row{font-size:12px;line-height:1.45}
body:has(#builderWrap):not(.client-mode) .movement-assessment-card strong{font-size:22px}
body:has(#builderWrap):not(.client-mode) .movement-assessment-card small{font-size:10.5px;line-height:1.5}
body:has(#builderWrap):not(.client-mode) .movement-assessment-card select{font-size:14px;min-height:44px}
body:has(#builderWrap):not(.client-mode) .reviewitem .k{font-size:9px}
body:has(#builderWrap):not(.client-mode) .reviewitem .v{font-size:23px}
@media(max-width:560px){
  body:has(#builderWrap):not(.client-mode) .lead{font-size:18px}
  body:has(#builderWrap):not(.client-mode) .btn{font-size:11px;padding:14px 17px}
  body:has(#builderWrap):not(.client-mode) .builder-day-head h3{font-size:25px}
  body:has(#builderWrap):not(.client-mode) .builder-check-row{font-size:11px}
}

/* REVIEW 2026-09-16: laptop hero breakpoint. Mobile remains unchanged. */
@media(min-width:1041px) and (max-width:1540px){
  .hero-v65{
    grid-template-columns:minmax(0,60%) minmax(0,40%)!important;
  }
  .hero-v65 .hero-copy{
    min-width:0;
    padding-left:clamp(36px,4vw,58px)!important;
    padding-right:clamp(36px,4vw,58px)!important;
  }
  .hero-v65-title{
    width:100%!important;
    max-width:100%!important;
    font-size:clamp(50px,4.5vw,72px)!important;
    line-height:.80!important;
    letter-spacing:-.052em!important;
    transform:skewX(-3deg)!important;
  }
  .hero-v65-title .hero-title-line{
    max-width:none!important;
    white-space:nowrap!important;
  }
  .hero-bottom-v65{
    max-width:720px!important;
  }
  .hero-bottom-v65 p{
    font-size:clamp(15px,1.12vw,18px)!important;
    line-height:1.42!important;
  }
  .hero-cta-row{
    gap:10px!important;
  }
  .hero-cta-row .button{
    min-width:0;
  }
}