/* MyWaterBudget shared brand layer.
   One header nav, one footer, one form-input token and one section-h2 size for the public site
   (index, start, pros, find, join, queencreek, preview, signin, success, learn).
   Link it AFTER the page's own <style> so equal-specificity rules here win.
   office / field / app use the shop's white-label color and do not load this file. */
:root{
  --mwb-teal:#0D6969; --mwb-teal-dk:#085252; --mwb-teal-deep:#0A4F4F; --mwb-teal-lt:#E0F0F0;
  --mwb-orange:#B04E1C; --mwb-glow:#F0A870; --mwb-green:#177E56;
  --mwb-ink:#182C2C; --mwb-muted:#4A6464; --mwb-sand:#F5F3EE;
  --mwb-input-h:48px; --mwb-input-r:10px; --mwb-input-border:#A9B8B0; --mwb-ring:0 0 0 3px rgba(13,105,105,.2);
  --mwb-h2:clamp(1.8rem,4.2vw,2.5rem);
}

/* ── Header nav ─────────────────────────────────────────────── */
.mwb-top{background:linear-gradient(165deg,#0D6969 0%,#0A5555 60%,#0D5E5E 100%);padding:12px 0;}
.mwb-top-in{max-width:1120px;margin:0 auto;padding:0 22px;}
.mwb-nav{display:flex;align-items:center;flex-wrap:wrap;gap:4px 18px;position:relative;z-index:3;}
.mwb-nav .mwb-brand{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.35rem;line-height:1;color:#fff;text-decoration:none;white-space:nowrap;margin-right:auto;display:inline-flex;align-items:center;min-height:44px;}
.mwb-nav .mwb-brand span{color:var(--mwb-glow);}
.mwb-nav .mwb-brand small{font-family:'Outfit',sans-serif;font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#A8DCDC;margin-left:8px;}
.mwb-links{display:flex;align-items:center;gap:2px;}
.mwb-links a{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border-radius:999px;color:#D7EBEB;text-decoration:none;font:500 .92rem/1 'Outfit',sans-serif;white-space:nowrap;transition:background .2s,color .2s;}
.mwb-links a:hover{background:rgba(255,255,255,.1);color:#fff;}
.mwb-links a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.12);}
.mwb-actions{display:flex;align-items:center;gap:8px;}
.mwb-pill,.mwb-cta{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 16px;border-radius:999px;text-decoration:none;font:500 .9rem/1 'Outfit',sans-serif;white-space:nowrap;transition:background .2s,transform .15s;}
.mwb-pill{color:#fff;border:1px solid rgba(255,255,255,.38);}
.mwb-pill:hover{background:rgba(255,255,255,.12);}
.mwb-cta{color:#fff;font-weight:600;background:linear-gradient(135deg,#F0A870,#B04E1C);box-shadow:0 8px 20px -10px rgba(176,78,28,.8);}
.mwb-cta:hover{transform:translateY(-1px);}
.mwb-nav a:focus-visible{outline:2px solid #fff;outline-offset:2px;}
@media(max-width:760px){
  .mwb-nav{gap:2px 8px;}
  .mwb-nav .mwb-brand{font-size:1.25rem;}
  .mwb-nav .mwb-brand small{display:none;}
  .mwb-actions{order:2;}
  .mwb-links{order:3;width:100%;border-top:1px solid rgba(255,255,255,.14);padding-top:4px;margin-top:4px;}
  .mwb-links a{padding:0 10px;font-size:.88rem;}
  .mwb-links a:first-child{margin-left:-10px;}
  .mwb-pill,.mwb-cta{padding:0 13px;font-size:.84rem;}
  .mwb-sm-hide{display:none;}
  .mwb-top-in{padding:0 16px;}
}

/* ── Footer ─────────────────────────────────────────────────── */
footer.mwb-foot{background:var(--mwb-teal-deep);color:#A9CACA;text-align:center;padding:30px 0 26px;font-family:'Outfit',sans-serif;font-size:.82rem;line-height:1.6;}
.mwb-foot-in{max-width:880px;margin:0 auto;padding:0 22px;}
footer.mwb-foot .mwb-foot-brand{display:inline-block;padding:4px 0;font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.35rem;line-height:1.2;color:#fff;text-decoration:none;}
footer.mwb-foot .mwb-foot-brand span{color:var(--mwb-glow);}
.mwb-foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 6px;margin-top:6px;}
footer.mwb-foot a{color:#D7EBEB;text-decoration:none;}
footer.mwb-foot a:hover{color:#fff;text-decoration:underline;}
footer.mwb-foot .mwb-foot-links a{display:inline-flex;align-items:center;min-height:40px;padding:0 8px;font-weight:500;}
.mwb-foot-extra{margin-top:10px;font-size:.8rem;}
.mwb-foot-extra .mwb-foot-h{display:block;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8FB8B8;margin-bottom:2px;}
footer.mwb-foot .mwb-foot-extra a{display:inline-block;padding:10px 4px;}
.mwb-foot-legal{margin-top:12px;font-size:.74rem;line-height:1.65;color:#9CC0C0;}
.mwb-foot-legal p+p{margin-top:8px;}
.mwb-foot-legal .mwb-foot-h{display:block;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#B5D3D3;margin-bottom:2px;}
.mwb-foot-copy{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12);font-size:.76rem;color:#9CC0C0;}

/* ── Form input token: 48px tall · 10px radius · 16px text · one border + focus ring ──
   Only height/vertical padding are set, so page-specific horizontal padding (the $ prefix,
   mwb-password.js's padding-right for Show/Hide) stays intact. */
html body :is(input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=search],input[type=url],input[type=date],input:not([type]),select){
  height:var(--mwb-input-h);min-height:var(--mwb-input-h);padding-top:0;padding-bottom:0;
  font-family:inherit;font-size:16px;line-height:1.2;color:var(--mwb-ink);
  background-color:#fff;border:1.5px solid var(--mwb-input-border);border-radius:var(--mwb-input-r);
  outline:none;box-shadow:none;transition:border-color .18s,box-shadow .18s;
}
html body textarea{
  min-height:96px;padding-top:12px;padding-bottom:12px;font-family:inherit;font-size:16px;line-height:1.45;color:var(--mwb-ink);
  background-color:#fff;border:1.5px solid var(--mwb-input-border);border-radius:var(--mwb-input-r);outline:none;box-shadow:none;transition:border-color .18s,box-shadow .18s;
}
html body :is(input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=search],input[type=url],input[type=date],input:not([type]),select,textarea):focus{
  border-color:var(--mwb-teal);box-shadow:var(--mwb-ring);outline:none;background-color:#fff;
}
html body :is(input,select,textarea)[readonly]{background-color:#F1F0EB;color:var(--mwb-muted);}
html body :is(input,select,textarea)::placeholder{color:#5E7272;opacity:1;}
