/* ==========================================================================
   Elite Home Saver — member app theme
   --------------------------------------------------------------------------
   Loaded by member-manager via member_sites.parent_css_url for this tenant
   only, after the app's own inline <style>. It restyles the app's existing
   markup (.header/.card/.btn/.form-group/...) into the "Trusted Neighbor"
   language so /members/* matches the rest of elitehomesaver.com.

   No markup changes: the templates are shared across ~182 tenant sites, so
   everything here is an override keyed to classes the app already emits.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,300..800,0..100,0..1&family=Karla:ital,wght@0,300..800;1,300..800&display=swap");

:root {
  --ehs-ink: #12291f;
  --ehs-ink-soft: #40564a;
  --ehs-ink-faint: #6d8175;
  --ehs-teal: #00b0bc;
  --ehs-teal-deep: #00808a;
  --ehs-teal-wash: #e2f5f6;
  --ehs-clay: #c25a35;
  --ehs-clay-deep: #a24525;
  --ehs-sand: #f7f2e9;
  --ehs-cream: #fffdf8;
  --ehs-line: #e5dccb;
  --ehs-radius: 14px;
  --ehs-radius-lg: 24px;
  --ehs-radius-pill: 999px;
  --ehs-display: "Fraunces", Georgia, serif;
  --ehs-body: "Karla", "Helvetica Neue", Arial, sans-serif;
  --ehs-ease: cubic-bezier(.22, 1, .36, 1);

  /* Repoint the app's own variables so anything still using them lands in
     palette rather than on Indigo #4F46E5 / green #10B981. */
  --primary-color: var(--ehs-teal-deep);
  --secondary-color: var(--ehs-ink-soft);
  --accent-color: var(--ehs-clay);
}

body {
  font-family: var(--ehs-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ehs-ink);
  background-color: var(--ehs-sand);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ehs-display);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 40, "WONK" 0;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--ehs-ink);
}

h1 { font-size: clamp(1.9rem, 3.6vw, 2.5rem); }

a { color: var(--ehs-teal-deep); text-underline-offset: 3px; }
a:hover { color: var(--ehs-clay); }

:focus-visible { outline: 2px solid var(--ehs-teal-deep); outline-offset: 3px; border-radius: 4px; }

/* ---------- Header / nav ---------- */
.header {
  background-color: rgba(255, 253, 248, .9);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--ehs-line);
  box-shadow: none;
  padding: .85rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo {
  font-family: var(--ehs-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--ehs-ink);
  text-decoration: none;
}
.logo img { height: 42px !important; width: auto; }

.nav { display: flex; align-items: center; gap: .35rem; }

.nav a {
  font-weight: 600;
  font-size: .975rem;
  color: var(--ehs-ink);
  text-decoration: none;
  padding: .5rem .9rem;
  border-radius: 8px;
  transition: color .16s var(--ehs-ease), background-color .16s var(--ehs-ease);
}
.nav a:hover { color: var(--ehs-teal-deep); background-color: var(--ehs-teal-wash); }

/* Make the last nav item read as the primary action, matching the site nav. */
.nav a[href$="/register"] {
  background-color: var(--ehs-clay);
  color: #fff;
  border-radius: var(--ehs-radius-pill);
  padding: .55rem 1.15rem;
  box-shadow: 0 2px 0 var(--ehs-clay-deep);
}
.nav a[href$="/register"]:hover { background-color: var(--ehs-clay-deep); color: #fff; }

/* ---------- Layout ---------- */
.main { padding: clamp(2rem, 5vw, 3.5rem) 0; }

.card {
  background-color: var(--ehs-cream);
  border: 1px solid var(--ehs-line);
  border-radius: var(--ehs-radius-lg);
  box-shadow: 0 2px 6px rgba(18, 41, 31, .05), 0 20px 40px -28px rgba(18, 41, 31, .25);
  padding: clamp(1.75rem, 4vw, 2.5rem);
}

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--ehs-body);
  font-weight: 700;
  font-size: 1rem;
  background-color: var(--ehs-clay);
  border-radius: var(--ehs-radius-pill);
  padding: .85rem 1.7rem;
  box-shadow: 0 2px 0 var(--ehs-clay-deep);
  transition: transform .18s var(--ehs-ease), background-color .18s var(--ehs-ease),
              box-shadow .18s var(--ehs-ease);
}
.btn:hover {
  background-color: var(--ehs-clay-deep);
  transform: translateY(-2px);
  box-shadow: 0 4px 0 var(--ehs-clay-deep);
}
.btn:active { transform: translateY(0); }

.btn-secondary {
  background-color: transparent;
  color: var(--ehs-ink);
  border: 1px solid var(--ehs-ink);
  box-shadow: none;
}
.btn-secondary:hover { background-color: var(--ehs-ink); color: var(--ehs-cream); box-shadow: none; }

/* ---------- Forms ---------- */
.form-group label {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ehs-ink-soft);
  margin-bottom: .4rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: .75rem .9rem;
  border: 1.5px solid var(--ehs-line);
  border-radius: 10px;
  background: #fff;
  font-family: var(--ehs-body);
  font-size: 1rem;
  color: var(--ehs-ink);
  transition: border-color .16s var(--ehs-ease), box-shadow .16s var(--ehs-ease);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--ehs-teal-deep);
  box-shadow: 0 0 0 3px var(--ehs-teal-wash);
}

.form-group small { color: var(--ehs-ink-faint); }

/* ---------- Consent block ---------- */
.form-tcpa {
  background-color: var(--ehs-sand);
  border: 1px solid var(--ehs-line);
  border-radius: var(--ehs-radius);
  padding: 1.1rem 1.25rem;
}

.tcpa-row {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  margin-bottom: .9rem;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--ehs-ink-soft);
}
.tcpa-row:last-child { margin-bottom: 0; }

.tcpa-row input[type="checkbox"] {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .15rem;
  accent-color: var(--ehs-teal-deep);
}

.tcpa-section-title {
  font-family: var(--ehs-body);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ehs-ink);
  margin: 1.1rem 0 .6rem;
}

.tcpa-methods { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }
.tcpa-methods .tcpa-row { margin-bottom: .35rem; font-size: .9375rem; }

/* ---------- Alerts ---------- */
.alert {
  border-radius: var(--ehs-radius);
  padding: .85rem 1.1rem;
  border: 1px solid transparent;
  font-size: .9375rem;
}
.alert-error {
  background-color: #fdecea;
  border-color: #f3c2bb;
  color: #8a2c1a;
}
.alert-success {
  background-color: var(--ehs-teal-wash);
  border-color: rgba(0, 128, 138, .35);
  color: var(--ehs-teal-deep);
}

/* ---------- Footer ---------- */
.footer {
  background-color: var(--ehs-ink);
  color: rgba(255, 253, 248, .72);
  border-top: 0;
  padding: 2.5rem 0;
  margin-top: 3rem;
}
.footer a { color: rgba(255, 253, 248, .72); }
.footer a:hover { color: var(--ehs-teal); }

/* ---------- Saved projects (dashboard + /members/projects) ---------- */

.mp-page-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.75rem;
}
.mp-page-sub { color: var(--ehs-ink-soft); margin: .35rem 0 0; }

.mp-panel-head {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--ehs-line);
}
.mp-panel-actions { display: flex; align-items: center; gap: 1rem; }

.mp-link { font-weight: 700; font-size: .9375rem; text-decoration: none; }
.mp-link:hover { text-decoration: underline; }

.mp-new { padding: .6rem 1.15rem !important; font-size: .9375rem !important; }

/* One project block. On the dashboard several stack, separated by a rule. */
.mp-project { padding: 1.25rem 0; border-bottom: 1px solid var(--ehs-line); }
.mp-project:last-child { border-bottom: 0; padding-bottom: 0; }
.mp-project-solo { padding: 0; border-bottom: 0; }

.mp-project-head {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: .6rem;
}

.mp-status {
  display: inline-block;
  padding: .2rem .65rem;
  margin-right: .6rem;
  border-radius: var(--ehs-radius-pill);
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  background-color: var(--ehs-teal-wash);
  color: var(--ehs-teal-deep);
  vertical-align: middle;
}
.mp-status-matched { background-color: #e6f4ea; color: #1e6b35; }
.mp-status-draft   { background-color: var(--ehs-sand); color: var(--ehs-ink-soft); }
.mp-status-closed  { background-color: #eceff1; color: #56646d; }

.mp-address {
  font-family: var(--ehs-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ehs-ink);
}

.mp-date { font-size: .875rem; color: var(--ehs-ink-faint); white-space: nowrap; }

.mp-cats {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ehs-teal-deep);
  margin: 0 0 .75rem;
}

.mp-measure {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1rem;
  padding: .7rem .9rem;
  background-color: var(--ehs-teal-wash);
  border-radius: var(--ehs-radius);
  font-size: .9375rem;
  color: var(--ehs-ink-soft);
}
.mp-measure strong { font-family: var(--ehs-display); font-size: 1.15rem; color: var(--ehs-ink); }

.mp-badge {
  padding: .15rem .55rem;
  border-radius: var(--ehs-radius-pill);
  background-color: var(--ehs-teal-deep);
  color: #fff;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.mp-badge-soft { background-color: var(--ehs-ink-faint); }

.mp-items { list-style: none; margin: 0 0 1rem; padding: 0; }
.mp-items li {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  justify-content: space-between;
  padding: .55rem 0;
  border-bottom: 1px dashed var(--ehs-line);
  font-size: .9375rem;
}
.mp-items li:last-child { border-bottom: 0; }
.mp-item-name { font-weight: 600; }
.mp-item-opts { font-weight: 400; color: var(--ehs-ink-faint); }
.mp-item-qty { color: var(--ehs-ink-soft); white-space: nowrap; }

.mp-range {
  margin: 0;
  padding-top: .9rem;
  border-top: 2px solid var(--ehs-line);
  font-size: .9375rem;
  color: var(--ehs-ink-soft);
}
.mp-range strong { font-family: var(--ehs-display); font-size: 1.35rem; color: var(--ehs-ink); }
.mp-note { display: block; font-size: .8125rem; color: var(--ehs-ink-faint); margin-top: .15rem; }

.mp-empty { text-align: center; padding: 1.5rem 1rem; }
.mp-empty p { color: var(--ehs-ink-soft); max-width: 34rem; margin: 0 auto .75rem; }
.mp-empty .btn { margin-top: .75rem; }

@media (max-width: 575.98px) {
  .mp-panel-head, .mp-page-head { flex-direction: column; align-items: flex-start; }
  .mp-items li { flex-direction: column; gap: .15rem; }
}