/*
 * Nutriminds.net custom style overrides — ported 1:1 from the former build-time
 * assets/styles/imports/_branding.scss.
 *
 * WHY THIS FILE EXISTS: the old mechanism copied the brand folder over webapp/ and compiled that SCSS
 * into the nuxt bundle. The bundle is BRAND-AGNOSTIC since the runtime branding mechanism landed, so
 * the SCSS silently stopped applying (a `.scss` under assets/ is packed into the archive but never
 * compiled — the build warns about it now). Only files listed in `branding.assets.css` are injected at
 * runtime (plugins/branding-head.js), which is what this file is.
 *
 * SCSS `$variables` are resolved here: brandable base tokens become the runtime custom properties
 * (var(--color-primary) etc., set in brand.config.ts → theme.cssVars) so a live brand switch re-themes
 * these rules too; derived shades that have no runtime token become the literal Sass output.
 *
 *   $color-brand      #DC3C22  red      $color-primary-light   #E4624D  (brand +10% L)
 *   $color-headings   #3D7AB6  blue     $color-secondary-light #AAC6E2  (headings +30% L)
 *   $color-text       #112033  dark     $color-secondary-active #306090 (headings −10% L)
 *   $color-borders    #FBF5DE  beige    $color-bg              #FBFBFD
 *   $color-bg-alt     #EAC8A6  brown    $text-color-base       rgb(75, 69, 84) (framework)
 *
 * The SCSS also reassigned framework variables that have NO runtime CSS custom property. Where the
 * consumer is a plain selector, the rule is written out below (see "Ribbon"). The rest:
 *   • $color-toast-blue / $chat-icon-add|send|emoji — the brand set them to $color-secondary, which
 *     for this brand is the SAME colour as the framework default ($color-secondary / $color-primary
 *     resp., and primary == secondary == #3D7AB6 here). Nothing was lost.
 *   • $color-locale-menu — the framework has no consumer left. Dead either way.
 *   • $chat-message-color, $chat-message-bg-others, $chat-sidemenu-background-over — NOT reachable
 *     from CSS: they leave the SCSS through the :export block in assets/_new/styles/export.scss and
 *     are handed to vue-advanced-chat as JS theme values. Fixing them means making those three tokens
 *     var()-backed in the framework's tokens.scss, like the other chat tokens already are.
 */

.vac-avatar {
  background-color: var(--color-secondary) !important;
}

body {
  background-color: #fbfbfd !important;
  font-family: var(--font-family-text) !important;
}
.os-button,
.ds-list,
.ds-select-search {
  font-family: var(--font-family-text) !important;
}
/* "a" link colors */
a {
  color: var(--color-primary);
}
a:hover {
  color: #e4624d;
}

/* Avatar menu dropdown text color */
.avatar-menu-popover {
  color: #112033;
}

.avatar-menu-popover a {
  color: #112033;
}
.avatar-menu-popover a:hover {
  color: var(--color-primary-hover);
}

.v-popover.open .trigger a {
  color: var(--color-primary);
}

.main-navigation a {
  color: #112033;
}
.main-navigation .router-link-exact-active {
  color: var(--color-primary) !important;
}

.main-navigation .locale-menu {
  color: #112033;
}

.hc-hashtag a {
  color: var(--color-primary);
}
.hc-hashtag a:hover {
  color: #e4624d;
}

.user-avatar .info a .slug {
  color: #112033;
}
.user-avatar .info a:hover .slug {
  color: var(--color-primary);
}

.avatar-image.--no-image {
  background-color: var(--color-secondary);
}
.avatar-image.--no-image .initials {
  font-weight: 600;
  color: white;
}
.profile-page-avatar.avatar-image.--no-image {
  background-color: var(--color-primary);
}
.profile-page-avatar.avatar-image.--no-image .initials {
  color: white;
}

#footer a {
  font-weight: 400;
}
#footer a:hover {
  color: #eac8a6;
}

/* Versions-Link nicht klickbar (Kundenwunsch: kein GitHub-Verweis) */
#footer > a[href*="github.com"] {
  pointer-events: none;
  color: inherit !important;
  text-decoration: none;
  cursor: default;
}

.avatar-menu .avatar-image {
  color: var(--color-primary);
}

.avatar-image .initials {
  color: white;
}

/* Ribbon (the post-type badge). The ARTICLE colour is a runtime token (theme.cssVars →
   --color-ribbon-article), but announcement and event are plain SCSS in components/Ribbon/index.vue,
   so they need explicit rules here. `!important` beats the scoped style's [data-v-…] specificity.
   .--pinned = announcement (was $color-secondary, framework default is the warning orange),
   .eventBg = event (was $color-bg-alt, framework default is a purple). Shadows = −20% L. */
.ribbon.--pinned {
  background-color: var(--color-secondary) !important;
}
.ribbon.--pinned::before {
  border-color: #23476a transparent transparent #23476a !important;
}
.ribbon.eventBg {
  background-color: #eac8a6 !important;
}
.ribbon.eventBg::before {
  border-color: #d79553 transparent transparent #d79553 !important;
}

/* active tab border bottom color */
div.tab-navigation li.Tabs__tab {
  border-bottom-color: var(--color-primary);
}

/* os-button outline (non-filled, non-danger) */
.os-button[data-appearance="outline"]:not([data-variant="danger"]) {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.os-button[data-appearance="outline"]:not(
    [data-variant="danger"]
  ):enabled:hover {
  background-color: transparent;
  color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}
.os-button[data-appearance="outline"]:not(
    [data-variant="danger"]
  ):enabled:active {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary-active);
}

/* os-button filled */
.os-button[data-appearance="filled"]:not([data-variant="danger"]) {
  background-color: var(--color-secondary);
  color: white;
  border-color: var(--color-secondary);
}
.os-button[data-appearance="filled"]:not(
    [data-variant="danger"]
  ):enabled:hover {
  background-color: #112033;
  color: white;
  border-color: #112033;
}
.os-button[data-appearance="filled"]:not(
    [data-variant="danger"]
  ):enabled:active {
  background-color: var(--color-secondary);
  color: white;
  border-color: var(--color-secondary);
}

/* color of active filter tags in post teaser */
span.category-tag.filterActive {
  background-color: var(--color-primary);
}

/* input */
div.ds-input-wrap > input:focus-within.ds-input {
  border-color: var(--color-primary);
}
.ds-input:focus {
  border-color: var(--color-primary);
}
.ds-form-item.ds-input-has-focus .ds-select,
.ds-form-item.ds-input-has-focus .ds-select-dropdown {
  border-color: var(--color-primary);
}

/* checkbox */
[type="checkbox"] {
  accent-color: #e4624d;
}

/* Donation progress bar */
.progress-bar__goal {
  border-color: var(--color-donation-bar) !important;
  background: #fbf5de !important;
}

.progress-bar__progress.color-repeating-linear-gradient {
  background: repeating-linear-gradient(
    120deg,
    var(--color-donation-bar) 0px,
    var(--color-donation-bar) 30px,
    #aac6e2 50px,
    #aac6e2 75px,
    var(--color-donation-bar) 95px
  ) !important;
}

.progress-bar__label {
  color: #112033;
  font-weight: 600;
}

/* Main navigation logo max-width and spacing. The max-width is redundant with logos.headerWidth
   (Logo.vue writes that on the <img> inline) but kept identical to the former SCSS; the MARGINS have
   no config equivalent and are the reason this rule is still needed. */
.logo-wrapper {
  max-width: 60px;
  margin-left: 20px;
  margin-right: 10px;
}

.mobil-header-box .logo-container {
  max-width: 60px !important;
  margin-left: 10px;
  margin-right: 10px;
}

/* Filter button menu background */
.filterButtonMenu {
  background-color: #fbfbfd !important;
}

.main-navigation .os-button[data-appearance] {
  color: #112033;
}
.main-navigation .os-button[data-appearance]:hover {
  background-color: var(--color-primary);
  color: white !important;
  border-color: var(--color-primary);
}

.editor .os-button[data-appearance] {
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}
.editor .os-button[data-appearance]:hover {
  color: white;
  background-color: black;
  border-color: black;
}

/* Login quote: keep the paragraph breaks of the multi-line quote, and hide the author line —
   LoginForm.vue renders a hard-coded "- {{ author }}", and this brand has no author. */
.login-form blockquote p {
  white-space: pre-line;
}
.login-form blockquote b {
  display: none;
}