/*
 * Shared site chrome: the v5 topbar (templates/v5/topbar.html) and footer
 * (templates/v5/footer.html), used by ALL THREE layouts:
 *  - the v5 customer layout (templates/v5/layout.html), loaded before styles.css
 *  - the classic layout (templates/index.html), alongside MDL/jQuery-UI
 *  - the coordinator layout (templates/layout.html + templates/team/layout.html)
 * Keep every selector class-scoped so nothing bleeds into classic pages.
 */

:root {
  --moms-care:#a04956;
  --barnwood-rustic:#810029;
  --linen-calming:#f1f1de;
  --stem-organic:#566e49;
  --green-dark:#46633e;
  --textile-family:#d78682;
  --ink:#27322f;
  --muted:#69716f;
  --line:#e8e5cf;
  --white:#fff;
  --shadow:0 14px 30px rgba(54,70,51,.10);
}

/* ---- Topbar ---- */
.topbar {
  background:var(--moms-care);
  min-height:64px;
  box-shadow:0 2px 5px rgba(0,0,0,.16);
}
.topbar .container {
  max-width:1180px;
}
/* Brand + team identity (GLOBAL-02 redesign): the bar says whose site this is — the team
   name with the campaign as its role line, then the logo. The bar is mirrored, so this
   block sits on the RIGHT and the menu control on the left. The coordinator contact that
   used to sit here lives in the footer now. */
.brand-ident {
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0; /* lets the team name ellipsize instead of overflowing the bar */
}
.brand-mark {
  color:#fff;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  flex:none;
}
.brand-mark img {
  display:block;
  height:48px;
}
.brand-rule {
  width:1px;
  align-self:stretch;
  background:rgba(241,241,222,.35);
  flex:none;
}
/* Right-hand side of the mirrored bar, so it reads in towards the logo */
.team-mark {
  color:var(--linen-calming);
  min-width:0;
  text-align:right;
}
.team-mark-name {
  font-weight:700;
  font-size:1rem;
  letter-spacing:-.01em;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.team-mark-role {
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(241,241,222,.7);
}

/* The single menu control: guests get Login, everyone else toggles the gutter */
.menu-btn {
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:.9rem;
  letter-spacing:.03em;
  border:1.5px solid rgba(255,255,255,.55);
  border-radius:8px;
  padding:8px 14px;
  white-space:nowrap;
  background:rgba(0,0,0,.08);
}
.menu-btn:hover,
.menu-btn:focus-visible {
  background:rgba(0,0,0,.2);
  border-color:#fff;
  color:#fff;
}
.menu-btn .material-icons {
  font-size:18px;
}
@media (max-width: 575.98px) {
  .brand-ident { gap:10px; }
  .brand-mark img { height:34px; }
  .team-mark-name { font-size:.9rem; max-width:150px; }
  .team-mark-role { display:none; }
  .menu-btn { padding:8px 10px; }
}

/* Customer-facing coordinator contact strip under the bar (templates/v5/topbar.html) —
   the brand's deeper tone, same bar-over-band relationship as .topbar-banner */
.topbar-help {
  background:var(--barnwood-rustic);
  color:var(--linen-calming);
  font-size:.85rem;
  line-height:1.5;
}
.topbar-help .container {
  max-width:1180px;
  padding-top:.4rem;
  padding-bottom:.4rem;
  gap:.25rem 1.35rem;
}
.topbar-help-lead {
  font-weight:700;
}
.topbar-help a {
  color:inherit;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  overflow-wrap:anywhere; /* long coordinator emails wrap instead of overflowing on phones */
}
.topbar-help a:hover,
.topbar-help a:focus-visible {
  color:#f9e8e6;
  text-decoration:underline;
}
.topbar-help .material-icons {
  font-size:1.2em;
  flex:none;
}

/* Coordinator status strip under the standard header (templates/team/layout.html);
   text sizing/font comes from theme.css utilities on the element */
.topbar-banner {
  background:var(--moms-care);
  border-top:1px solid rgba(241,241,222,.3);
}
/* Banner links (SmartyTeam::generateBanner) would otherwise take theme.css's global
   a { color:--stem-organic } — unreadable green on this burgundy. Inherit the strip's
   light text and keep an underline: mid-sentence links need more than color here. */
.topbar-banner a {
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
}
.topbar-banner a:hover,
.topbar-banner a:focus-visible {
  color:#f9e8e6;
}

/* ---- Footer (GLOBAL-03: standard footer, all layouts) ---- */
.site-footer-wave svg {
  display:block;
  width:100%;
  margin-bottom:-1px; /* avoids a hairline seam against the footer at fractional zoom */
}
.site-footer-wave path {
  fill:var(--moms-care);
}
.site-footer {
  background:var(--moms-care);
  color:var(--linen-calming);
}
.site-footer h2 {
  /* explicit font + margin: the classic layout has global heading rules that would bleed in */
  font-family:'gumbo-regular','Fredoka',sans-serif;
  font-size:1.75rem;
  margin:0 0 1rem;
  color:inherit;
}
.site-footer a {
  color:inherit;
  text-decoration:none;
}
.site-footer-contact {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:1.35rem;
  overflow-wrap:anywhere; /* long emails wrap instead of overflowing on phones */
}
.site-footer-contact .material-icons {
  font-size:1.4em;
  flex:none;
}
.site-footer-smallprint {
  font-size:.9rem;
}

/* ---- Mini-footer (everyone but coordinators/admins): the classic site's compact
   footer, in the header palette (GLOBAL-03: bg --moms-care, text + SVGs --linen-calming) ---- */
.mini-footer {
  background:var(--moms-care);
  color:var(--linen-calming);
  font-size:.9rem;
}
.mini-footer .container {
  max-width:1180px;
}
.mini-footer a {
  color:inherit;
  text-decoration:none;
}
.mini-footer a:hover,
.mini-footer a:focus-visible {
  color:#f9e8e6;
}
.mini-footer-copy a:hover,
.mini-footer-copy a:focus-visible {
  text-decoration:underline;
}
.mini-footer svg {
  display:block;
}

/* ---- Classic-layout scaffolding ---- */
/* Keeps the footer at the bottom of short pages now that the MDL flex layout wrapper is gone. */
.docs-layout {
  display:flex;
  flex-direction:column;
  min-height:100vh;
}