/* MOLO Public Shell Consistency V1 - 2026-08-31
   Customer-facing shell only. Does not style planner workspaces. */

:root{
  --molo-shell-gutter:28px;
  --molo-shell-mobile-gutter:14px;
  --molo-shell-paper:#fffaf1;
  --molo-shell-ink:#15120f;
  --molo-shell-line:rgba(24,20,16,.12);
  --molo-shell-accent:#5f7f55;
}

/* Keep the whole customer-facing header genuinely full width. */
.molo-home-header,
.molo-public-clean-header,
.v36-public-header,
.molo-shell-top{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  border-bottom:1px solid var(--molo-shell-line)!important;
  background:rgba(255,250,241,.96)!important;
  backdrop-filter:blur(16px);
}

/* Homepage - master reference. */
.molo-home-header .molo-home-wrap,
.molo-home-header .molo-home-header-inner{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding-left:var(--molo-shell-gutter)!important;
  padding-right:var(--molo-shell-gutter)!important;
}
.molo-home-header .molo-home-header-inner{
  min-height:100px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:20px!important;
}
.molo-home-header .molo-home-logo{margin-right:auto!important;flex:0 0 auto!important}
.molo-home-header nav{margin-left:auto!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:10px!important}

/* Shared MOLO public header. */
.molo-public-clean-header{
  padding:0!important;
}
.molo-public-clean-header .molo-header-inner{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  min-height:100px!important;
  padding:13px var(--molo-shell-gutter)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:20px!important;
}
.molo-public-clean-header .molo-logo{
  margin-right:auto!important;
  flex:0 0 auto!important;
}
.molo-public-clean-header .molo-nav{
  margin-left:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  flex-wrap:wrap!important;
}

/* Main-site pages that use the direct .molo-header shell. */
@media (min-width:1181px){
  .molo-header:not(.molo-public-clean-header){
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:13px var(--molo-shell-gutter)!important;
    min-height:100px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:20px!important;
  }
  .molo-header:not(.molo-public-clean-header) > .logo,
  .molo-header:not(.molo-public-clean-header) > .molo-logo,
  .molo-header:not(.molo-public-clean-header) > .molo-brand,
  .molo-header:not(.molo-public-clean-header) > a:first-child{
    margin-right:auto!important;
    flex:0 0 auto!important;
  }
  .molo-header:not(.molo-public-clean-header) > .molo-nav,
  .molo-header:not(.molo-public-clean-header) > .header-actions,
  .molo-header:not(.molo-public-clean-header) > nav:last-child,
  .molo-header:not(.molo-public-clean-header) > div:last-child{
    margin-left:auto!important;
  }
}

/* Older V3.6 public/legal shell. */
.v36-public-header{
  min-height:100px!important;
  padding:13px var(--molo-shell-gutter)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:20px!important;
}
.v36-public-header .v36-public-brand{margin-right:auto!important;flex:0 0 auto!important}
.v36-public-header nav{margin-left:auto!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:10px!important;flex-wrap:wrap!important}

/* Create-account shell - class is added by the installer only to that page's existing header.top. */
.molo-shell-top{
  min-height:100px!important;
  padding:13px var(--molo-shell-gutter)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:20px!important;
}
.molo-shell-top > :first-child{margin-right:auto!important}
.molo-shell-top > :last-child{margin-left:auto!important}

/* One recognisable MOLO brand scale across the customer-facing site. */
.molo-home-header .molo-brand-mark,
.molo-public-clean-header .molo-brand-mark,
.molo-header:not(.molo-public-clean-header) .molo-brand-mark,
.molo-header:not(.molo-public-clean-header) .logo img,
.v36-public-header .v36-public-brand img,
.molo-shell-top .molo-brand-mark,
.molo-shell-top img[alt*="MOLO" i]{
  width:74px!important;
  height:74px!important;
  min-width:74px!important;
  max-width:74px!important;
  border-radius:22px!important;
  object-fit:cover!important;
  display:block!important;
}
.molo-home-header .molo-brand-words strong,
.molo-public-clean-header .molo-brand-words strong,
.molo-header:not(.molo-public-clean-header) .molo-brand-words strong,
.v36-public-header .v36-public-brand strong{
  font-size:33px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:-.025em!important;
  color:var(--molo-shell-ink)!important;
  white-space:nowrap!important;
}
.molo-home-header .molo-brand-words em,
.molo-public-clean-header .molo-brand-words em,
.molo-header:not(.molo-public-clean-header) .molo-brand-words em,
.v36-public-header .v36-public-brand small{
  display:block!important;
  margin-top:7px!important;
  font-size:9px!important;
  line-height:1.1!important;
  font-weight:900!important;
  letter-spacing:.20em!important;
  text-transform:uppercase!important;
  color:var(--molo-shell-accent)!important;
  white-space:nowrap!important;
}

/* Shared pill/button rhythm in the top bar. */
.molo-public-clean-header .molo-nav .btn,
.molo-header:not(.molo-public-clean-header) .header-actions .btn,
.molo-header:not(.molo-public-clean-header) .molo-nav a,
.molo-home-header .molo-btn,
.v36-public-header nav a,
.molo-shell-top a,
.molo-shell-top button{
  min-height:46px!important;
  border-radius:999px!important;
  font-size:14px!important;
  font-weight:900!important;
  line-height:1!important;
}
.molo-header-status{
  min-height:46px!important;
  display:inline-flex!important;
  align-items:center!important;
  white-space:nowrap!important;
}

/* Footer - same full-width outer rhythm while leaving each page's inner design intact. */
.footer,
.v36-public-footer{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  border-top:1px solid var(--molo-shell-line)!important;
  padding-left:var(--molo-shell-gutter)!important;
  padding-right:var(--molo-shell-gutter)!important;
}
.footer > .molo-wrap,
.footer > .molo-home-wrap{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  padding-left:0!important;
  padding-right:0!important;
}

/* Mobile deliberately reshapes instead of shrinking the desktop shell. */
@media(max-width:900px){
  .molo-home-header .molo-home-wrap,
  .molo-home-header .molo-home-header-inner,
  .molo-public-clean-header .molo-header-inner,
  .v36-public-header,
  .molo-shell-top{
    padding-left:var(--molo-shell-mobile-gutter)!important;
    padding-right:var(--molo-shell-mobile-gutter)!important;
  }
  .molo-home-header .molo-home-header-inner,
  .molo-public-clean-header .molo-header-inner,
  .v36-public-header,
  .molo-shell-top{
    min-height:76px!important;
  }
  .molo-home-header .molo-brand-mark,
  .molo-public-clean-header .molo-brand-mark,
  .molo-header:not(.molo-public-clean-header) .molo-brand-mark,
  .molo-header:not(.molo-public-clean-header) .logo img,
  .v36-public-header .v36-public-brand img,
  .molo-shell-top .molo-brand-mark,
  .molo-shell-top img[alt*="MOLO" i]{
    width:54px!important;
    height:54px!important;
    min-width:54px!important;
    max-width:54px!important;
    border-radius:17px!important;
  }
  .molo-home-header .molo-brand-words strong,
  .molo-public-clean-header .molo-brand-words strong,
  .molo-header:not(.molo-public-clean-header) .molo-brand-words strong,
  .v36-public-header .v36-public-brand strong{
    font-size:22px!important;
  }
  .molo-home-header .molo-brand-words em,
  .molo-public-clean-header .molo-brand-words em,
  .molo-header:not(.molo-public-clean-header) .molo-brand-words em,
  .v36-public-header .v36-public-brand small{
    font-size:7.5px!important;
    letter-spacing:.13em!important;
  }
  .molo-public-clean-header .molo-header-inner{
    align-items:flex-start!important;
    flex-wrap:wrap!important;
  }
  .molo-public-clean-header .molo-nav{
    width:100%!important;
    margin-left:0!important;
    justify-content:flex-start!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    padding-bottom:5px!important;
  }
  .molo-public-clean-header .molo-nav > *{flex:0 0 auto!important}
  .footer,.v36-public-footer{
    padding-left:var(--molo-shell-mobile-gutter)!important;
    padding-right:var(--molo-shell-mobile-gutter)!important;
  }
}

@media(max-width:520px){
  .molo-home-header .molo-brand-words em,
  .molo-public-clean-header .molo-brand-words em,
  .molo-header:not(.molo-public-clean-header) .molo-brand-words em{
    display:none!important;
  }
  .molo-header-status{font-size:12px!important;min-height:42px!important;padding-left:12px!important;padding-right:12px!important}
}