/* weare-brand.css (weare-brand-v1): We Are branding for the client portal, staff sign-in, registration and Today.
 * Applies only under body.brand-weare, which the templates set for the We Are tenant. Other tenants are untouched.
 * Palette from the We Are site and logo: cream #FCF9DF, orange #F25C1D, teal #36D8B7, pink #DBB7B7,
 * plum #2A1F5C (headings) and #5943B2 (photo). Text on orange uses #C9450F (4.8:1 with white). */
body.brand-weare {
  --wa-cream: #FCF9DF;
  --wa-cream-dk: #F4EDC9;
  --wa-orange: #F25C1D;
  --wa-orange-ink: #C9450F;
  --wa-orange-lt: #FEEDE3;
  --wa-teal: #36D8B7;
  --wa-teal-lt: #DDF7F0;
  --wa-pink: #DBB7B7;
  --wa-plum: #2A1F5C;
  --wa-violet: #5943B2;
  --wa-ink: #18181B;
  --wa-muted: #5B5470;
  --wa-line: #EADFC8;
}

/* ── Client portal ──────────────────────────────────────────────────────────────────────────────────── */
body.brand-weare.cp {
  --orange: var(--wa-orange-ink);
  --orange-lt: var(--wa-orange-lt);
  --navy: var(--wa-plum);
  --navy-lt: #3A2D78;
  --bg: var(--wa-cream);
  --border: var(--wa-line);
  --muted: var(--wa-muted);
  background: var(--wa-cream);
}
/* the portal's script shows and hides .login-wrap with an inline display:flex, so the layout stays a flex row */
body.brand-weare.cp .login-wrap {
  background: var(--wa-cream);
  padding: 0;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
}
body.brand-weare .wa-photo {
  position: relative;
  flex: 0 0 52%;
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(19, 18, 60, .10) 0%, rgba(19, 18, 60, .55) 100%),
    url('/static/img/weare-hands.webp') center / cover no-repeat,
    linear-gradient(120deg, var(--wa-orange), var(--wa-violet));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 48px;
  color: #fff;
}
body.brand-weare .wa-photo-logo { height: 56px; width: auto; align-self: flex-start; }
body.brand-weare .wa-photo-copy { max-width: 460px; }
body.brand-weare .wa-photo-copy h2, body.brand-weare .wa-photo-copy p, body.brand-weare .wa-photo-copy li { color: #fff; }
body.brand-weare .wa-photo-copy h2 {
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 40px; line-height: 1.1; letter-spacing: -.01em;
  margin-bottom: 12px; text-shadow: 0 1px 12px rgba(19, 18, 60, .35);
}
body.brand-weare .wa-photo-copy p { font-size: 16px; line-height: 1.55; opacity: .95; text-shadow: 0 1px 8px rgba(19, 18, 60, .4); }
body.brand-weare.cp .login-wrap > .login-card {
  align-self: center; margin: 32px auto; flex: 0 1 400px; border-color: var(--wa-line);
  box-shadow: 0 12px 40px rgba(42, 31, 92, .10); border-radius: 16px;
}
body.brand-weare.cp .wa-lockup { display: block; height: 44px; width: auto; margin-bottom: 6px; }
body.brand-weare.cp .portal-sub { color: var(--wa-muted); letter-spacing: .06em; }
body.brand-weare.cp .login-title, body.brand-weare.cp .page-title { color: var(--wa-plum); }
body.brand-weare.cp .field-label { color: var(--wa-muted); }
body.brand-weare.cp .field-input { border-color: #DCD2BA; }
body.brand-weare.cp .field-input:focus { border-color: var(--wa-orange-ink); box-shadow: 0 0 0 3px rgba(242, 92, 29, .18); }
body.brand-weare.cp .btn-primary { background: var(--wa-orange-ink); }
body.brand-weare.cp .btn-primary:hover:not(:disabled) { background: #B83E0C; }
body.brand-weare.cp .error-box { color: #9A3412; border-color: #F7C9B0; }

@media (max-width: 899px) {
  body.brand-weare.cp .login-wrap { flex-direction: column; justify-content: flex-start; }
  body.brand-weare.cp .wa-photo { flex: 0 0 auto; min-height: 240px; padding: 20px 20px 48px; background-position: center 30%; }
  body.brand-weare.cp .wa-photo-copy h2 { font-size: 26px; }
  body.brand-weare.cp .wa-photo-copy p { display: none; }
  body.brand-weare.cp .wa-photo-logo { height: 40px; }
  body.brand-weare.cp .login-wrap > .login-card { margin: -28px 16px 24px; flex: 0 0 auto; align-self: stretch; max-width: none; width: auto; padding: 28px 22px; position: relative; }
}

/* signed in */
body.brand-weare.cp .portal-app { background: #FFFDF5; box-shadow: 0 0 60px rgba(42, 31, 92, .12); }
body.brand-weare.cp .portal-header { background: var(--wa-cream); border-bottom: 1px solid var(--wa-line); height: 56px; }
body.brand-weare.cp .wa-header-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
body.brand-weare.cp .wa-header-brand img { height: 30px; width: auto; display: block; }
body.brand-weare.cp .wa-header-brand span { font-size: 12px; color: var(--wa-muted); white-space: nowrap; }
body.brand-weare.cp .portal-header-name { color: var(--wa-ink); font-weight: 500; }
body.brand-weare.cp .btn-signout { color: var(--wa-muted); text-decoration: underline; text-underline-offset: 2px; }
body.brand-weare.cp .bottom-nav { border-top-color: var(--wa-line); background: #FFFDF5; }
body.brand-weare.cp .nav-tab { color: var(--wa-muted); }
body.brand-weare.cp .nav-tab.active { color: var(--wa-orange-ink); box-shadow: inset 0 3px 0 var(--wa-orange); }
body.brand-weare.cp .card, body.brand-weare.cp .appt-card { border-color: var(--wa-line); }
body.brand-weare.cp .appt-date-block { background: var(--wa-plum); }
body.brand-weare.cp .message.client .msg-bubble { background: var(--wa-plum); }
body.brand-weare.cp .message.clinician .msg-bubble { background: var(--wa-cream-dk); }
body.brand-weare.cp .intake-progress-wrap { background: var(--wa-cream-dk); }
body.brand-weare.cp .intake-progress-bar { background: linear-gradient(90deg, var(--wa-orange), var(--wa-violet)); }
body.brand-weare.cp .secure-badge { background: var(--wa-teal-lt); color: #0B6B57; }
body.brand-weare.cp .consent-box { background: #FFFBEA; }

/* ── Today ──────────────────────────────────────────────────────────────────────────────────────────── */
body.brand-weare .wa-today-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 0; align-items: stretch;
  background: var(--wa-cream); border: 1px solid var(--wa-line); border-radius: var(--radius-lg, 10px); overflow: hidden;
}
body.brand-weare .wa-today-text { padding: 18px 20px; display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; }
body.brand-weare .wa-today-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--wa-orange-ink); }
body.brand-weare .wa-today-label img { height: 22px; width: auto; }
body.brand-weare .wa-today-hero .today-summary { font-size: 20px; line-height: 1.35; font-weight: 600; color: var(--wa-plum); }
body.brand-weare .wa-today-photo {
  background:
    linear-gradient(90deg, var(--wa-cream) 0%, rgba(252, 249, 223, 0) 35%),
    url('/static/img/weare-hands-900.webp') 60% 55% / cover no-repeat;
}
body.brand-weare .today-h { color: var(--wa-plum); }
body.brand-weare .today-rail { background: #FBF7E6; border: 1px solid var(--wa-line); }
@media (max-width: 640px) {
  body.brand-weare .wa-today-hero { grid-template-columns: 1fr; }
  body.brand-weare .wa-today-photo { display: none; }
}

/* ── Staff sign-in and registration (/login, /register) ──────────────────────────────────────────────── */
body.brand-weare.auth {
  --primary: var(--wa-orange-ink);
  background: var(--wa-cream);
  padding: 0;
  align-items: stretch;
  justify-content: flex-start;
}
body.brand-weare.auth .wa-photo { flex: 0 0 52%; align-self: flex-start; position: sticky; top: 0; height: 100vh; min-height: 0; }
body.brand-weare.auth .wa-photo-copy ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; font-size: 15px; text-shadow: 0 1px 8px rgba(19, 18, 60, .4); }
body.brand-weare.auth .wa-photo-copy li::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--wa-teal); margin-right: 10px; vertical-align: middle; }
body.brand-weare.auth > .card {
  align-self: center; margin: 40px auto; flex: 0 1 440px;
  border-color: var(--wa-line); border-radius: 16px; box-shadow: 0 12px 40px rgba(42, 31, 92, .10);
}
body.brand-weare.auth .wa-lockup { display: block; height: 44px; width: auto; margin-bottom: 6px; }
body.brand-weare.auth .logo-sub { color: var(--wa-muted); letter-spacing: .06em; }
body.brand-weare.auth .card h2 { color: var(--wa-plum); }
body.brand-weare.auth .card p, body.brand-weare.auth label, body.brand-weare.auth .register-link, body.brand-weare.auth .signin-link { color: var(--wa-muted); }
body.brand-weare.auth input, body.brand-weare.auth select { border-color: #DCD2BA; }
body.brand-weare.auth input:focus, body.brand-weare.auth select:focus { border-color: var(--wa-orange-ink); box-shadow: 0 0 0 3px rgba(242, 92, 29, .18); }
body.brand-weare.auth button { background: var(--wa-orange-ink); }
body.brand-weare.auth button:hover:not(:disabled) { background: #B83E0C; }
body.brand-weare.auth .signin-link a, body.brand-weare.auth .register-link a { color: var(--wa-orange-ink); }
body.brand-weare.auth .join-badge { color: var(--wa-orange-ink); background: var(--wa-orange-lt); border-color: #F7C9B0; }
body.brand-weare.auth .error { color: #9A3412; border-color: #F7C9B0; }
@media (max-width: 899px) {
  body.brand-weare.auth { flex-direction: column; }
  body.brand-weare.auth .wa-photo { flex: 0 0 auto; position: relative; height: auto; min-height: 240px; padding: 20px 20px 48px; align-self: stretch; background-position: center 30%; }
  body.brand-weare.auth .wa-photo-copy h2 { font-size: 26px; }
  body.brand-weare.auth .wa-photo-copy p, body.brand-weare.auth .wa-photo-copy ul { display: none; }
  body.brand-weare.auth .wa-photo-logo { height: 40px; }
  body.brand-weare.auth > .card { margin: -28px 16px 24px; flex: 0 0 auto; align-self: stretch; max-width: none; width: auto; padding: 28px 22px; position: relative; }
}