/* BMITDEE V3.2.0 — Mobile-first interaction redesign
   Loaded after style.css and foundation.css.
   Goals: faster first calculation, deterministic mobile form alignment,
   compact headers/hero areas, consistent page gutters, and better article rhythm. */

:root{
  --v32-mobile-gutter:16px;
  --v32-form-label:96px;
  --v32-form-gap:12px;
  --v32-control-height:46px;
}

/* Prevent old page-specific width rules from escaping the V3.1 shell. */
.main-wrap.guide-page,
.main-wrap.calc-page-wrap,
.main-wrap.home-main-wrap,
.main-wrap.formula-page,
.main-wrap.calibration-page,
.main-wrap.deficit-page,
.main-wrap.embed-page,
.main-wrap.faq-authority-page,
.main-wrap.weekend-digest-page{
  width:calc(100% - (2 * var(--page-gutter)))!important;
  max-width:var(--site-max-width)!important;
  margin-inline:auto!important;
}

/* Cleaner shared page rhythm. */
.main-wrap:first-child{padding-top:18px!important}
.calculator-card.compact-first-fold{margin-top:0!important}

/* Desktop calculator remains centered and readable, without a narrow site shell. */
.page-calculator .calculator-card{
  width:100%;
  max-width:820px!important;
  margin-inline:auto!important;
}
.page-calculator .calc-form{max-width:650px!important}
.page-calculator .calculator-card>h1{max-width:760px;margin-inline:auto!important}
.page-calculator .calculator-card>.intro{max-width:720px!important}
.intro-mobile{display:none}

/* Improve article and guide rhythm on all sizes. */
.guide-hero{max-width:900px;margin-inline:auto;padding:24px 0 12px!important}
.guide-hero p{margin:0!important}
.guide-content,
.faq-intro-card,
.faq-authority-section,
.helpful-guides,
.guide-cta{max-width:900px;margin-left:auto!important;margin-right:auto!important}

/* Compact sticky header: more usable viewport without weakening touch targets. */
@media(max-width:960px){
  :root{--header-height:60px}
  .topbar,.topbar-inner{min-height:60px!important}
  .brand{font-size:20px!important}
  .menu-toggle{
    min-width:46px!important;
    width:46px!important;
    min-height:46px!important;
    height:46px!important;
    padding:7px!important;
    border-radius:10px!important;
  }
  .menu-icon{width:23px!important;gap:5px!important}
  .menu-icon span{height:3px!important}
  .nav{top:60px!important;max-height:calc(100dvh - 60px)!important}
  .nav-backdrop{inset:60px 0 0!important}
}

/* Mobile calculators: interaction before explanation. */
@media(max-width:760px){
  :root{
    --page-gutter:var(--v32-mobile-gutter);
    --v32-form-label:94px;
    --v32-form-gap:11px;
  }

  body{background:#f2f6f9!important}
  .main-wrap:first-child{padding-top:10px!important}
  .home-main-wrap,.calc-page-wrap{padding-bottom:30px!important}

  .page-calculator .calculator-card.compact-first-fold{
    padding:18px 18px 20px!important;
    margin:0 auto!important;
    border:1px solid #dce6ee!important;
    border-radius:16px!important;
    background:#fff!important;
    box-shadow:0 8px 24px rgba(30,49,66,.07)!important;
  }

  .page-calculator .calculator-card>h1{
    margin:0 auto 9px!important;
    color:#064579!important;
    font-size:clamp(30px,8.2vw,36px)!important;
    line-height:1.08!important;
    letter-spacing:-.035em!important;
    text-align:center!important;
    text-wrap:balance;
  }
  .page-home .calculator-card>h1{
    font-size:clamp(29px,7.8vw,34px)!important;
    max-width:580px!important;
  }

  .page-calculator .calculator-card>.intro{
    margin:0 auto 12px!important;
    max-width:590px!important;
    color:#4c6070!important;
    font-size:16px!important;
    line-height:1.45!important;
    text-align:center!important;
    text-wrap:pretty;
  }
  .page-home .intro-desktop{display:none!important}
  .page-home .intro-mobile{display:inline!important}

  /* Compact, familiar tab bar rather than a tall segmented panel. */
  .page-calculator .tdee-tabs,
  .page-calculator .tabs{
    position:relative!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    width:min(100%,290px)!important;
    max-width:290px!important;
    margin:0 auto 10px!important;
    padding:0!important;
    gap:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .page-calculator .tdee-tabs::before,
  .page-calculator .tabs::before{
    content:""!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    height:1px!important;
    background:#cfd9e1!important;
    z-index:0!important;
  }
  .page-calculator .tdee-tabs .tab,
  .page-calculator .tabs .tab{
    position:relative!important;
    z-index:1!important;
    width:100%!important;
    min-height:42px!important;
    padding:9px 12px!important;
    margin:0 0 -1px!important;
    border:1px solid transparent!important;
    border-bottom:1px solid transparent!important;
    border-radius:8px 8px 0 0!important;
    background:transparent!important;
    color:#45697f!important;
    font-size:16px!important;
    font-weight:600!important;
    line-height:1.2!important;
    box-shadow:none!important;
  }
  .page-calculator .tdee-tabs .tab.active,
  .page-calculator .tabs .tab.active{
    border-color:#cfd9e1!important;
    border-bottom-color:#fff!important;
    background:#fff!important;
    color:#075f97!important;
    font-weight:800!important;
  }

  /* Keep the section title available to assistive technology but remove visual height. */
  .page-calculator .tdee-personal-title,
  .page-calculator .form-section-title{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important;
  }

  /* Deterministic two-column form rows. This intentionally overrides old
     V2 mobile patches that allowed labels and controls to occupy the same cell. */
  body.page-calculator .calculator-card .calc-form .form-row,
  body.page-calculator .calculator-card .cluster-form .form-row,
  body.page-calculator .calculator-card .tdee-classic-form .form-row{
    display:grid!important;
    grid-template-columns:var(--v32-form-label) minmax(0,1fr)!important;
    grid-auto-flow:row!important;
    column-gap:var(--v32-form-gap)!important;
    row-gap:4px!important;
    align-items:center!important;
    margin:8px 0!important;
    min-width:0!important;
  }
  body.page-calculator .calculator-card .calc-form .form-row>label:first-child,
  body.page-calculator .calculator-card .calc-form .form-row>.form-group-label{
    grid-column:1!important;
    grid-row:1!important;
    align-self:center!important;
    justify-self:stretch!important;
    margin:0!important;
    color:#20262b!important;
    font-size:15px!important;
    font-weight:800!important;
    line-height:1.2!important;
    text-align:right!important;
    white-space:normal!important;
  }
  body.page-calculator .calculator-card .calc-form .form-row>input:not([type=radio]):not([type=checkbox]),
  body.page-calculator .calculator-card .calc-form .form-row>select,
  body.page-calculator .calculator-card .calc-form .form-row>.with-unit,
  body.page-calculator .calculator-card .calc-form .form-row>.height-pair,
  body.page-calculator .calculator-card .calc-form .form-row>.inline-radios{
    grid-column:2!important;
    grid-row:1!important;
    justify-self:start!important;
    min-width:0!important;
  }

  /* Gender stays on one compact row. */
  body.page-calculator .calculator-card .inline-radios{
    display:flex!important;
    grid-template-columns:none!important;
    align-items:center!important;
    gap:14px!important;
    width:auto!important;
    max-width:100%!important;
    white-space:nowrap!important;
  }
  body.page-calculator .calculator-card .inline-radios label{
    min-height:40px!important;
    display:inline-flex!important;
    align-items:center!important;
    gap:6px!important;
    margin:0!important;
    font-size:16px!important;
    font-weight:400!important;
    line-height:1!important;
  }
  body.page-calculator .calculator-card .inline-radios input[type=radio]{
    width:22px!important;
    height:22px!important;
    min-height:22px!important;
    margin:0!important;
  }

  /* Compact controls modeled on a comfortable native mobile form. */
  body.page-calculator .calculator-card .calc-form input:not([type=radio]):not([type=checkbox]):not([type=hidden]),
  body.page-calculator .calculator-card .calc-form select{
    min-height:var(--v32-control-height)!important;
    height:var(--v32-control-height)!important;
    margin:0!important;
    padding:9px 11px!important;
    border:1px solid #c8d5de!important;
    border-radius:8px!important;
    background:#fff!important;
    font-size:16px!important;
    line-height:1.2!important;
  }
  body.page-calculator .calculator-card .calc-form input[type=number]{
    width:112px!important;
    max-width:112px!important;
    flex:0 0 112px!important;
  }
  body.page-calculator .calculator-card .with-unit{
    position:relative!important;
    display:block!important;
    width:130px!important;
    max-width:100%!important;
  }
  body.page-calculator .calculator-card .with-unit input[type=number]{
    width:100%!important;
    max-width:100%!important;
    padding-right:44px!important;
  }
  body.page-calculator .calculator-card .with-unit>span{
    position:absolute!important;
    top:50%!important;
    right:11px!important;
    transform:translateY(-50%)!important;
    color:#657682!important;
    font-size:15px!important;
    pointer-events:none!important;
  }
  body.page-calculator .calculator-card .height-combo{
    width:min(100%,210px)!important;
    max-width:210px!important;
  }
  body.page-calculator .calculator-card .activity-select{
    width:min(100%,360px)!important;
    max-width:360px!important;
  }
  body.page-calculator .calculator-card .bodyfat-input{
    width:108px!important;
  }
  body.page-calculator .calculator-card .bodyfat-input input[type=number]{
    width:100%!important;
    max-width:100%!important;
  }
  body.page-calculator .calculator-card .bodyfat-row label span{
    display:inline!important;
    margin-left:2px!important;
    color:#6c747a!important;
    font-size:12px!important;
    font-weight:600!important;
    line-height:1.2!important;
  }
  body.page-calculator .calculator-card .bodyfat-row label .term-tip{
    display:inline-flex!important;
    margin-left:3px!important;
  }

  /* Imperial ft/in pair is compact and cannot reverse or drift. */
  body.page-calculator .calculator-card .height-pair{
    display:grid!important;
    grid-template-columns:72px 22px 72px 22px!important;
    gap:5px!important;
    align-items:center!important;
    width:auto!important;
    max-width:100%!important;
  }
  body.page-calculator .calculator-card .height-pair input[type=number]{
    width:72px!important;
    max-width:72px!important;
    min-width:0!important;
  }
  body.page-calculator .calculator-card .height-pair>span{
    position:static!important;
    transform:none!important;
    color:#64737e!important;
    font-size:15px!important;
  }

  /* Secondary helper messages sit under the control, not in a third column. */
  body.page-calculator .calculator-card .form-row>.activity-help-link,
  body.page-calculator .calculator-card .form-row>.activity-prefill-note{
    grid-column:2!important;
    grid-row:2!important;
    margin:0!important;
    font-size:12px!important;
    line-height:1.35!important;
  }
  body.page-calculator .calculator-card .form-row>.activity-help-link{display:none!important}

  /* Primary action aligns with the control column and remains visible early. */
  body.page-calculator .calculator-card .calc-form>.form-action{
    width:calc(100% - var(--v32-form-label) - var(--v32-form-gap))!important;
    max-width:250px!important;
    margin:11px 0 0 calc(var(--v32-form-label) + var(--v32-form-gap))!important;
    padding:0!important;
  }
  body.page-calculator .calculator-card .calc-form>.form-action .btn-calc{
    width:100%!important;
    min-height:50px!important;
    padding:10px 14px!important;
    border-radius:9px!important;
    font-size:19px!important;
    line-height:1.2!important;
  }
  body.page-calculator .calculator-card .calc-form>p.activity-help-link{
    margin:9px 0 0 calc(var(--v32-form-label) + var(--v32-form-gap))!important;
    max-width:360px!important;
    font-size:12px!important;
    line-height:1.35!important;
  }

  .page-calculator .cluster-result{margin-top:16px!important}
  .page-calculator .seo-content-wrap{padding-top:0!important}
}

/* Very narrow phones retain compact rows, with slightly smaller label column. */
@media(max-width:380px){
  :root{
    --v32-mobile-gutter:12px;
    --v32-form-label:84px;
    --v32-form-gap:9px;
  }
  .page-calculator .calculator-card.compact-first-fold{padding:16px 14px 18px!important}
  .page-calculator .calculator-card>h1{font-size:29px!important}
  .page-home .calculator-card>h1{font-size:28px!important}
  body.page-calculator .calculator-card .calc-form .form-row>label:first-child,
  body.page-calculator .calculator-card .calc-form .form-row>.form-group-label{font-size:14px!important}
  body.page-calculator .calculator-card .inline-radios{gap:10px!important}
  body.page-calculator .calculator-card .inline-radios label{font-size:15px!important}
  body.page-calculator .calculator-card .height-pair{grid-template-columns:64px 20px 64px 20px!important}
  body.page-calculator .calculator-card .height-pair input[type=number]{width:64px!important;max-width:64px!important}
}

/* Guide, article and long-form pages: restore gutters and reduce oversized first screens. */
@media(max-width:760px){
  body.page-guide .main-wrap.guide-page,
  body.page-tool .main-wrap.guide-page,
  body.page-simple .main-wrap,
  body.page-result .main-wrap{
    width:calc(100% - (2 * var(--v32-mobile-gutter)))!important;
    max-width:none!important;
    margin-inline:auto!important;
    padding-left:0!important;
    padding-right:0!important;
  }

  .guide-hero{
    width:100%!important;
    max-width:780px!important;
    margin:0!important;
    padding:15px 2px 10px!important;
  }
  .guide-kicker{
    margin:0 0 7px!important;
    font-size:12px!important;
    line-height:1.25!important;
    letter-spacing:.09em!important;
  }
  .guide-hero h1{
    margin:0 0 10px!important;
    max-width:760px!important;
    color:#064579!important;
    font-size:clamp(30px,8.3vw,36px)!important;
    line-height:1.08!important;
    letter-spacing:-.035em!important;
    text-wrap:balance;
  }
  .guide-hero p{
    max-width:720px!important;
    color:#4c6070!important;
    font-size:16px!important;
    line-height:1.5!important;
    text-wrap:pretty;
  }

  .guide-content,
  .faq-intro-card,
  .faq-authority-section,
  .deficit-article-card,
  .formula-input-card,
  .formula-result-card,
  .calibration-input-card,
  .calibration-result-card,
  .deficit-input-card,
  .deficit-result-card,
  .quiz-card,
  .quiz-result{
    width:100%!important;
    margin:14px 0!important;
    padding:18px!important;
    border-radius:13px!important;
  }
  .guide-content h2,
  .faq-authority-section h2,
  .deficit-article-card h2{
    margin:22px 0 9px!important;
    font-size:24px!important;
    line-height:1.2!important;
    letter-spacing:-.02em!important;
  }
  .guide-content h2:first-child{margin-top:0!important}
  .guide-content h3{font-size:19px!important;line-height:1.3!important}
  .guide-content p,.guide-content li,
  .faq-authority-section p,.faq-authority-section li{
    font-size:16px!important;
    line-height:1.65!important;
  }
  .guide-cta,.helpful-guides{width:100%!important;margin:14px 0!important}
}

/* Simple/legal pages use the same mobile content alignment. */
@media(max-width:760px){
  .page-simple .calculator-card.simple-page,
  .page-status .calculator-card{
    margin:0!important;
    padding:20px 18px!important;
    border-radius:14px!important;
  }
  .page-simple .calculator-card.simple-page h1{
    font-size:32px!important;
    line-height:1.1!important;
    letter-spacing:-.03em!important;
  }
}

/* Tablet landscape: forms stay compact instead of falling into the old wide 3-column grid. */
@media(min-width:761px) and (max-width:900px){
  .page-calculator .calculator-card{max-width:760px!important}
  .page-calculator .calc-form .form-row{
    grid-template-columns:140px minmax(0,280px) minmax(0,1fr)!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .page-calculator .btn-calc{transition:none!important}
}

/* Preserve the full SEO heading while giving small screens a clearer hierarchy. */
@media(max-width:760px){
  .page-home .calculator-title-primary,
  .page-home .calculator-title-detail{display:block}
  .page-home .calculator-title-separator{display:none}
  .page-home .calculator-title-primary{
    font-size:1em;
    line-height:1.05;
  }
  .page-home .calculator-title-detail{
    max-width:430px;
    margin:5px auto 0;
    font-size:.72em;
    line-height:1.12;
    letter-spacing:-.025em;
  }
}

/* Keep the body-fat help marker attached to its label on desktop too. */
@media(min-width:761px){
  .page-calculator .bodyfat-row>label:first-child{
    text-align:right!important;
    line-height:1.15!important;
  }
  .page-calculator .bodyfat-row>label:first-child .term-tip{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    margin-left:3px!important;
  }
  .page-calculator .bodyfat-row>label:first-child>span:last-child{
    display:block!important;
    margin-top:3px!important;
    text-align:right!important;
  }
}