/* Canopy SDA + Particify co-brand theme for vote.canopysda.au
 * Palette: Grounded Warmth (May 2026)
 * Primary Eucalypt #5B8C5A · Accent Terracotta #C4875A · Neutrals warm
 */

:root {
  --canopy-eucalypt: #5b8c5a;
  --canopy-light-eucalypt: #8ab87e;
  --canopy-soft-sage: #c2d1b5;
  --canopy-terracotta: #c4875a;
  --canopy-warm-sand: #e8e0d0;
  --canopy-warm-linen: #f5f1eb;
  --canopy-soft-white: #fafaf7;
  --canopy-warm-grey: #6b6560;
  --canopy-warm-charcoal: #2d2d2d;
}

/* Light theme token remap (Particify uses these extensively) */
.theme-light {
  --background: #f5f1eb !important;
  --surface: #fafaf7 !important;
  --dialog: #fafaf7 !important;
  --on-background: #2d2d2d !important;
  --on-surface: #2d2d2d !important;
  --on-surface-light: #6b6560 !important;
  --border: #e8e0d0 !important;
  --green: #5b8c5a !important;
  --success: #5b8c5a !important;
  --success-inverted: #8ab87e !important;
  --play: #5b8c5a !important;
  --play-variant: #c2d1b5 !important;
  --warn-soft: #c4875a !important;
  --orange: #c4875a !important;
  --grey: #6b6560 !important;
  --grey-lighter: #e8e0d0 !important;
  --grey-light: #f5f1eb !important;
  --black: #2d2d2d !important;
  --bar-green: #5b8c5a !important;
  --bar-light-green: #8ab87e !important;
  --bar-orange: #c4875a !important;
  --bar-deep-orange: #c4875a !important;
  --bar-brown: #c4875a !important;
  --text-green: #5b8c5a !important;
  --text-orange: #c4875a !important;
}

/* Dark theme: charcoal base, eucalypt accents */
.theme-dark {
  --background: #2d2d2d !important;
  --surface: #3a3632 !important;
  --dialog: #3a3632 !important;
  --on-background: #fafaf7 !important;
  --on-surface: #fafaf7 !important;
  --on-surface-light: #e8e0d0 !important;
  --border: #4a4540 !important;
  --green: #8ab87e !important;
  --success: #8ab87e !important;
  --play: #8ab87e !important;
  --black: #fafaf7 !important;
}

/* Page + Material surfaces */
html,
body {
  background: var(--canopy-warm-linen) !important;
}

.theme-light .mat-app-background,
.theme-light .mat-drawer-container,
.theme-light .mat-sidenav-container {
  background-color: var(--canopy-warm-linen) !important;
  color: var(--canopy-warm-charcoal) !important;
}

/* Primary buttons / FABs / progress — target common Material classes */
.theme-light .mat-mdc-raised-button.mat-primary,
.theme-light .mat-mdc-unelevated-button.mat-primary,
.theme-light .mat-mdc-fab.mat-primary,
.theme-light .mat-mdc-mini-fab.mat-primary,
.theme-light .mdc-button--raised.mat-primary,
.theme-light .mat-mdc-button.mat-primary {
  --mdc-protected-button-container-color: #5b8c5a;
  --mdc-protected-button-label-text-color: #fafaf7;
  --mdc-filled-button-container-color: #5b8c5a;
  --mdc-filled-button-label-text-color: #fafaf7;
  --mdc-text-button-label-text-color: #5b8c5a;
  background-color: #5b8c5a !important;
  color: #fafaf7 !important;
}

.theme-light .mat-mdc-raised-button.mat-primary:hover,
.theme-light .mat-mdc-unelevated-button.mat-primary:hover {
  background-color: #8ab87e !important;
}

.theme-light .mat-mdc-outlined-button.mat-primary {
  --mdc-outlined-button-label-text-color: #5b8c5a;
  --mdc-outlined-button-outline-color: #5b8c5a;
  color: #5b8c5a !important;
  border-color: #5b8c5a !important;
}

.theme-light .mat-mdc-checkbox.mat-primary,
.theme-light .mat-mdc-slide-toggle.mat-primary,
.theme-light .mat-mdc-radio-button.mat-primary {
  --mdc-checkbox-selected-icon-color: #5b8c5a;
  --mdc-switch-selected-track-color: #5b8c5a;
  --mdc-switch-selected-handle-color: #fafaf7;
  --mdc-radio-selected-icon-color: #5b8c5a;
}

.theme-light .mat-mdc-progress-bar,
.theme-light .mdc-linear-progress {
  --mdc-linear-progress-active-indicator-color: #5b8c5a;
}

.theme-light .mat-mdc-progress-spinner,
.theme-light .mat-progress-spinner {
  --mdc-circular-progress-active-indicator-color: #5b8c5a;
}

/* Accent / secondary actions → terracotta sparingly */
.theme-light .mat-mdc-raised-button.mat-accent,
.theme-light .mat-mdc-unelevated-button.mat-accent {
  background-color: #c4875a !important;
  color: #fafaf7 !important;
}

/* Cards / dialogs */
.theme-light .mat-mdc-card,
.theme-light .mat-mdc-dialog-container,
.theme-light .mdc-dialog__surface {
  background: #fafaf7 !important;
  color: #2d2d2d !important;
}

/* Header bar */
.theme-light app-header,
.theme-light .header,
.theme-light mat-toolbar.mat-primary {
  background: #fafaf7 !important;
  color: #2d2d2d !important;
  border-bottom: 1px solid #e8e0d0;
}

/* Links */
.theme-light a {
  color: #5b8c5a;
}

/* Login / home cards */
.theme-light .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,
.theme-light .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,
.theme-light .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing {
  border-color: #5b8c5a !important;
}

.theme-light .mat-mdc-form-field.mat-focused .mat-mdc-floating-label,
.theme-light .mat-mdc-form-field.mat-focused .mdc-floating-label {
  color: #5b8c5a !important;
}

/* ===== Logo: Canopy tagline primary, Particify as small credit only ===== */
app-logo,
lib-extension-point[extensionid="app-logo"],
lib-extension-point[extensionId="app-logo"],
lib-extension-point[ng-reflect-extension-id="app-logo"] {
  display: none !important;
}

/* Hide leftover stock wordmark SVGs (multiple Particify viewBoxes) */
svg[viewBox*="75.41"],
svg[viewBox*="11.94"],
svg[viewBox*="67.573"],
svg[viewBox*="67.57"],
svg[viewBox*="17.329"],
svg[aria-label*="Particify" i],
svg[aria-label*="particify" i] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/*
 * Stock home/login pins .logo-container / .heading to ~48–56px.
 * Our lockup (tagline + credit) is taller — without this the credit
 * clips on the left/bottom ("eting engagement by Particify").
 */
.logo-container,
.heading,
.canopy-logo-host,
app-home-page .logo-container,
app-home-page .heading,
app-login .logo-container {
  height: auto !important;
  min-height: 48px !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

/* Keep join column from clipping oversized brand */
app-home-page .heading,
app-home-page .content,
app-home-page,
app-login mat-card,
app-login .mat-mdc-card {
  overflow: visible !important;
}

.canopy-brand-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: min(320px, 100%);
  margin: 0 auto 12px;
  padding: 0 12px;
  box-sizing: border-box;
  text-align: center;
  overflow: visible !important;
}

.canopy-brand-lockup--lg {
  max-width: min(360px, 100%);
  margin-bottom: 20px;
}

.canopy-brand-lockup__logo {
  display: block;
  width: 100%;
  height: auto;
  max-height: 72px;
  object-fit: contain;
  object-position: center;
}

.canopy-brand-lockup--lg .canopy-brand-lockup__logo {
  max-height: 88px;
}

/* Compact header variant when parent is a toolbar/header row */
app-header .canopy-brand-lockup,
mat-toolbar .canopy-brand-lockup,
.header .canopy-brand-lockup {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin: 0;
  padding: 0;
  max-width: none;
  width: auto;
  text-align: left;
}

app-header .canopy-brand-lockup__logo,
mat-toolbar .canopy-brand-lockup__logo,
.header .canopy-brand-lockup__logo {
  width: auto;
  height: 36px;
  max-height: 36px;
  max-width: 200px;
}

.canopy-brand-lockup__credit {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 4px;
  font-size: 11px;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #6b6560;
  text-align: center;
  white-space: normal; /* was nowrap — caused left clip on narrow hosts */
  overflow: visible;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: manual;
}

app-header .canopy-brand-lockup__credit,
mat-toolbar .canopy-brand-lockup__credit {
  width: auto;
  border-left: 1px solid #e8e0d0;
  padding-left: 10px;
  font-size: 10px;
  white-space: nowrap;
  overflow-wrap: normal;
}

.theme-dark .canopy-brand-lockup__credit {
  color: #e8e0d0;
}
.theme-dark app-header .canopy-brand-lockup__credit,
.theme-dark mat-toolbar .canopy-brand-lockup__credit {
  border-left-color: #4a4540;
}

/* Login / home cards */
app-login .mat-mdc-card,
app-login mat-card {
  overflow: visible !important;
}

/* Footer: keep co-brand line readable on narrow phones */
app-footer #footer-toolbar,
app-footer {
  overflow: visible !important;
}
app-footer a {
  font-size: 12px;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 70vw;
}