/* U10: LocalLoop brand layer for the app.
 *
 * Directly linkable (no gulp build required) so the demo picks up LocalLoop
 * tokens without recompiling the sass bundle. The matching source partial is
 * static/src/sass/_localloop-brand.scss for the proper pipeline.
 *
 * Tokens approximate the LocalLoop palette — tune to static/branding/Design
 * Spec.svg. Loaded AFTER main.css so these win.
 *
 * STILL NEEDS BROWSER VERIFICATION:
 *   - swap the in-app logo (the .logo-bird_header-nav_v2 / .logo_partner_*
 *     background-image classes) to the LocalLoop logo asset;
 *   - recolour the Chart.js sentiment series in the charts JS to the
 *     Happy/Medium/Sad = green/amber/red scale defined below.
 */
:root {
  --ll-green: #1f7a5a;
  --ll-green-dark: #145c43;
  --ll-amber: #d98324;
  --ll-red: #c44536;
  --ll-ink: #14241d;
  /* Neutral tokens shared with the marketing layout. Defined here too because
     this stylesheet loads on the app pages (where the tour runs) and the
     marketing :root is not present there — without these the tour popover
     border and muted text colour would resolve to nothing. */
  --ll-ink-soft: #4a5b53;
  --ll-line: #e0e6e0;

  /* Sentiment scale — wire these into the Chart.js config. */
  --ll-sentiment-happy: #1f7a5a;
  --ll-sentiment-medium: #d98324;
  --ll-sentiment-sad: #c44536;
}

/* Primary actions + links pick up the brand green. */
.btn_primary,
.btn-login {
  background-color: var(--ll-green) !important;
  border-color: var(--ll-green) !important;
}
.btn_primary:hover,
.btn-login:hover { background-color: var(--ll-green-dark) !important; }

a { color: var(--ll-green-dark); }

/* Active nav tab accent. */
.nav-tabs .nav-link.active { border-bottom: 2px solid var(--ll-green) !important; color: var(--ll-green-dark) !important; }

/* Sentiment helper classes for any server-rendered sentiment markers. */
.sentiment-happy { color: var(--ll-sentiment-happy); }
.sentiment-medium { color: var(--ll-sentiment-medium); }
.sentiment-sad { color: var(--ll-sentiment-sad); }

/* Read-only demo: grey out + disable mutate affordances (demo.js tags these). */
.demo-readonly .demo-disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  filter: grayscale(40%);
}

/* Persistent "back to all communities" link for demo visitors. */
#ll-demo-back {
  position: fixed; left: 18px; bottom: 18px; z-index: 9999;
  background: var(--ll-green-dark); color: #fff; font-weight: 700;
  text-decoration: none; border-radius: 999px; padding: 10px 18px;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
#ll-demo-back:hover { background: var(--ll-green); color: #fff; }

/* Small "read-only demo" badge, top-centre. */
#ll-demo-badge {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 9999;
  background: var(--ll-amber); color: #fff; font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  border-radius: 999px; padding: 4px 12px; box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* ---- Modern LocalLoop tour theme (Driver.js popover, popoverClass=localloop-tour) ---- */
/* Compound selector (.driver-popover.localloop-tour) outranks Driver's base CSS
   regardless of stylesheet load order. */
.driver-popover.localloop-tour {
  border-radius: 16px;
  padding: 22px 22px 16px;
  max-width: 348px;
  background: #ffffff;
  border: 1px solid var(--ll-line);
  box-shadow: 0 20px 56px rgba(20, 36, 29, .30);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.driver-popover.localloop-tour .driver-popover-title {
  font-size: 17px; font-weight: 800; color: var(--ll-ink);
  letter-spacing: -.01em; line-height: 1.25; margin: 0 0 8px; padding-right: 22px;
}
/* brand accent bar above the title */
.driver-popover.localloop-tour .driver-popover-title::before {
  content: ""; display: block; width: 34px; height: 4px; border-radius: 999px;
  background: var(--ll-green); margin-bottom: 14px;
}
.driver-popover.localloop-tour .driver-popover-description {
  font-size: 14.5px; line-height: 1.55; color: var(--ll-ink-soft); margin: 0;
}
.driver-popover.localloop-tour .driver-popover-description a {
  color: var(--ll-green-dark); font-weight: 700;
}
.driver-popover.localloop-tour .driver-popover-progress-text {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ll-green); opacity: .9;
}
.driver-popover.localloop-tour .driver-popover-footer { margin-top: 16px; gap: 8px; }
.driver-popover.localloop-tour .driver-popover-footer button {
  border-radius: 999px; font-weight: 700; font-size: 13px; padding: 8px 16px;
  text-shadow: none; border: 1.5px solid transparent; transition: background .15s ease, color .15s ease;
}
.driver-popover.localloop-tour .driver-popover-next-btn {
  background: var(--ll-green); color: #fff;
}
.driver-popover.localloop-tour .driver-popover-next-btn:hover { background: var(--ll-green-dark); }
.driver-popover.localloop-tour .driver-popover-prev-btn {
  background: #fff; color: var(--ll-green-dark); border-color: var(--ll-line);
}
.driver-popover.localloop-tour .driver-popover-prev-btn:hover { background: #f1f5f2; }
.driver-popover.localloop-tour .driver-popover-close-btn {
  color: #9aa8a1; font-size: 22px; line-height: 1; transition: color .15s ease;
}
.driver-popover.localloop-tour .driver-popover-close-btn:hover { color: var(--ll-ink); }
/* arrow follows the white popover background */
.driver-popover.localloop-tour .driver-popover-arrow { color: #fff; }

/* Never split a word mid-character in the engagement card heading — on a narrow
   column "Engagement" was breaking into "Engage / ment". */
.engagement--card .card-title { overflow-wrap: break-word; word-break: normal; }

/* The legacy footer's third column is pinned to width:90px (sized for old social
   icons it no longer carries), which clips the About / Terms / Privacy links.
   Let it size to its content. */
.site-footer .footer--col_three { width: auto; }

/* The community header's chart slot is hard-coded to width:400px, which forces a
   horizontal scrollbar on phones (the page renders zoomed-out). Cap it to the
   container — the slot is empty, so this changes nothing on desktop. */
.community-display-counter--chart { max-width: 100%; }

/* Mobile: keep the tour popover and the fixed demo chrome inside the viewport
   on small screens (the 348px popover would otherwise overhang a phone). */
@media (max-width: 640px) {
  .driver-popover.localloop-tour {
    max-width: calc(100vw - 24px);
    padding: 18px 18px 14px;
  }
  #ll-demo-back {
    left: 12px; bottom: 12px; padding: 9px 14px; font-size: 14px;
  }
  #ll-demo-badge {
    top: auto; bottom: 12px; left: auto; right: 12px; transform: none;
  }

  /* The engagement card header uses fixed Bootstrap columns (.col-8/.col-4)
     that stay narrow on phones, cramping the title and pushing "Engagement
     Context" off to a sliver. Stack them full-width on small screens. */
  .engagement--card .row.header > .col-8,
  .engagement--card .row.header > .col-4 {
    flex: 0 0 100%; max-width: 100%;
  }
  .engagement--card .row.header > .col-4 { justify-content: flex-start !important; margin-top: 4px; }

  /* Footer: the legacy .row is flex-wrap:nowrap, so wide columns can't wrap and
     overflow the viewport. Stack them as a column and centre the content. */
  .site-footer .row { flex-direction: column; flex-wrap: wrap; }
  .site-footer .footer--col_one,
  .site-footer .footer--col_two,
  .site-footer .footer--col_three { text-align: center !important; flex: 1 1 auto; max-width: 100%; margin: 4px 0; }

  /* ---- Community header card (the squeezed Cato Manor counter) ----
     The whole card is built from fixed Bootstrap columns that never stack on a
     phone, so the title, map and 3-section stats bar get crushed side-by-side
     (labels break to "KNO WN / GEND ER"). Stack everything full-width. */

  /* Header row: title above the session-date metadata. */
  .community-display-counter .card-header .row > .col-6 { flex: 0 0 100%; max-width: 100%; }
  .community-display-counter--title--metadata.float-right { float: none !important; }
  .community-display-counter .card-header .card-title { margin-bottom: 10px; }

  /* Body row: map above the statistics bar, each full width. */
  .community-display-counter .card-body .row > .col-4,
  .community-display-counter .card-body .row > .col-8 { flex: 0 0 100%; max-width: 100%; }
  .community-display-counter--map { max-width: 280px; margin: 0 auto 18px; }

  /* The stats bar now spans the card. Let its three sections wrap to their own
     full-width rows so each has room, and stop labels breaking mid-word. */
  .statistics-bar .row.no-gutters { flex-wrap: wrap; row-gap: 16px; }
  .statistics-bar .row.no-gutters > [class*="statistics-bar--total"] {
    flex: 1 1 100%; max-width: 100%; text-align: center;
  }
  /* Centre the inner flex rows (the gender pair and the participant grid)
     without resizing the items — keeps the "all events" circle round. */
  .statistics-bar [class*="statistics-bar--total"] > .row.no-gutters { justify-content: center; }
  /* Centre each section's caption ("all events", "known gender", ...) under its
     now-centred value. Scoped to the section-level label only, so the small
     in-box labels (M:, F:, COMM ...) are untouched. */
  .statistics-bar [class*="statistics-bar--total"] > label { display: block; width: 100%; text-align: center; }
  .statistics-bar label { overflow-wrap: normal; word-break: keep-all; hyphens: none; }
}