/*
 * Darmbulanz 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      #780000  dark red   $color-primary-light    #AB0000  (brand +10% L)
 *   $color-headings   #004E80  dark blue  $color-secondary-light  #1AA6FF  (headings +30% L)
 *   $color-text       #112033  dark       $color-secondary-active #002F4D  (headings −10% L)
 *   $color-borders    #FDF0D5  cream      $color-bg               #FBFBFD
 *   $color-bg-alt     #858C7F  sage       $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 == #004E80 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.
 */

/* Font: INTER (body & default headings) via Google Fonts CDN. Declared here rather than in
   theme.fontFaces because the schema's font-face shape carries no `unicode-range`, and Inter is
   shipped as latin / latin-ext subsets. The family names are selected via theme.cssVars
   (--font-family-heading / --font-family-text). */
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2)
    format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2)
    format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2)
    format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2)
    format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2)
    format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2)
    format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2)
    format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2)
    format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* END Font:INTER */

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

body {
  background-color: #fbfbfd !important;
  font-family: var(--font-family-text) !important;
}

.os-button,
.ds-chip,
.ds-copy-field,
.ds-list,
.ds-select-search,
.ds-tag,
.ds-text {
  font-family: var(--font-family-text) !important;
}
.ds-heading {
  font-family: var(--font-family-heading) !important;
}

/* "a" link colors */
a {
  color: var(--color-primary);
}
a:hover {
  color: #ab0000;
}

.os-button.post-add-button-top {
  background-color: #002f4d;
  border-color: #002f4d;
}
a:hover > .os-button.post-add-button-top {
  background-color: var(--color-secondary);
  border-color: #112033;
}

/* ds-menu-item link colors */
a.ds-menu-item-link {
  color: var(--color-secondary);
}
a:hover.ds-menu-item-link {
  color: black;
}
.ds-menu-item-link.router-link-exact-active {
  color: var(--color-secondary);
  border-left-color: var(--color-secondary);
}

/* Avatar menu dropdown text color */
.avatar-menu-popover {
  color: #112033;
}
.avatar-menu-popover .ds-menu-item {
  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: #ab0000;
}

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

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

#footer a {
  color: #004e80;
  font-weight: 400;
}
#footer a:hover {
  color: #858c7f;
}

/* 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 .profile-avatar {
  color: var(--color-primary);
}

.profile-avatar .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: #00101a transparent transparent #00101a !important;
}
.ribbon.eventBg {
  background-color: #858c7f !important;
}
.ribbon.eventBg::before {
  border-color: #52574e transparent transparent #52574e !important;
}

/* chips with primary color */
.ds-chip-primary {
  background-color: var(--color-secondary);
}

/* number count color */
div.ds-number > p.ds-number-count {
  color: rgb(75, 69, 84);
}

/* 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: #ab0000;
}

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

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

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

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

.mobil-header-box .logo-container {
  max-width: 120px !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;
}