/* ============================================
   FALK CAFÉ — Mastodon Custom CSS
   Basert på Falk Media grafisk profil
   Lim inn i: Administration > Server Settings > Appearance > Custom CSS

   Fargepalett:
     Sort   #000000  — overskrifter, aktive elementer
     Sand   #A09074  — sekundærtekst, ikoner
     Cyan   #00FFFF  — PIP!-knappen (mørk bakgrunn)
     Cyan   #006868  — lenker på lys bakgrunn (WCAG AA)
     Krem   #ECE7DC  — panelbakgrunner
     Grå    #4D4D4D  — brødtekst

   Font: Jost (Brandon Grotesque-erstatning, Google Fonts)
         DM Sans (brødtekst)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;700;800;900&family=DM+Sans:wght@400;500;700&display=swap');


/* =====================
   VARIABLER
   ===================== */

:root {
  --falk-sort:        #000000;
  --falk-sand:        #A09074;
  --falk-cyan:        #00FFFF;
  --falk-cyan-access: #006868;   /* teal som passerer WCAG AA på krem */
  --falk-krem:        #ECE7DC;
  --falk-gra:         #4D4D4D;
  --falk-input-bg:    #F5F0E8;   /* litt lysere enn krem, for inputfelter */
  --falk-cyan-pale:   rgba(0, 255, 255, 0.15);
  --falk-hover-bg:    rgba(0, 0, 0, 0.05);
}


/* =====================
   1. PIP!-KNAPPEN
   Sort bakgrunn med cyan — popper mot krem-panelet
   ===================== */

.compose-form__submit .button,
.compose-form__publish-button-wrapper .button,
.compose-form__actions .button.button--block,
.compose-form__actions > .button:last-child {
  font-size: 0 !important;
  position: relative !important;
  background: var(--falk-sort) !important;
  border: 1.5px solid var(--falk-cyan) !important;
  border-radius: 6px !important;
  transition: background 0.15s ease !important;
}

.compose-form__submit .button:hover,
.compose-form__publish-button-wrapper .button:hover,
.compose-form__actions .button.button--block:hover,
.compose-form__actions > .button:last-child:hover {
  background: var(--falk-cyan) !important;
  box-shadow: 0 0 16px rgba(0, 255, 255, 0.45) !important;
}

/* Shimmer-sveip over PIP!-knappen */
@keyframes falk-shimmer {
  0%   { transform: translateX(-150%) skewX(-20deg); }
  100% { transform: translateX(250%) skewX(-20deg); }
}

.compose-form__submit .button,
.compose-form__publish-button-wrapper .button,
.compose-form__actions .button.button--block,
.compose-form__actions > .button:last-child {
  overflow: hidden !important;
}

.compose-form__submit .button::before,
.compose-form__publish-button-wrapper .button::before,
.compose-form__actions .button.button--block::before,
.compose-form__actions > .button:last-child::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 40% !important;
  height: 100% !important;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 255, 255, 0.35),
    transparent
  ) !important;
  transform: translateX(-150%) skewX(-20deg) !important;
  pointer-events: none !important;
}

.compose-form__submit .button:hover::before,
.compose-form__publish-button-wrapper .button:hover::before,
.compose-form__actions .button.button--block:hover::before,
.compose-form__actions > .button:last-child:hover::before {
  animation: falk-shimmer 0.8s ease !important;
}

/* Trykk-effekt */
.compose-form__submit .button:active,
.compose-form__publish-button-wrapper .button:active,
.compose-form__actions .button.button--block:active,
.compose-form__actions > .button:last-child:active {
  transform: scale(0.96) !important;
  transition: transform 0.05s ease !important;
}

.compose-form__submit .button::after,
.compose-form__publish-button-wrapper .button::after,
.compose-form__actions .button.button--block::after,
.compose-form__actions > .button:last-child::after {
  content: 'PIP!' !important;
  font-size: 13px !important;
  font-family: 'Jost', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--falk-cyan) !important;
  display: block !important;
  transition: color 0.15s ease !important;
}

.compose-form__submit .button:hover::after,
.compose-form__publish-button-wrapper .button:hover::after,
.compose-form__actions .button.button--block:hover::after,
.compose-form__actions > .button:last-child:hover::after {
  color: var(--falk-sort) !important;
}

/* Topbar publish-lenke (mobil) */
.ui__header__links [href="/publish"] span {
  font-size: 0 !important;
}

.ui__header__links [href="/publish"]::after {
  content: 'PIP!' !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  font-family: 'Jost', sans-serif !important;
  color: var(--falk-sort) !important;
  letter-spacing: .18em !important;
}


/* =====================
   2. NAVIGASJONSPANEL — KREM BAKGRUNN
   Høyre sidebar
   ===================== */

.navigation-panel,
.columns-area__panels__pane--navigational .columns-area__panels__pane__inner {
  background: var(--falk-krem) !important;
}

/* Standard navtekst: grå */
.navigation-panel .column-link {
  color: var(--falk-gra) !important;
}

.navigation-panel .column-link svg,
.navigation-panel .column-link .icon {
  color: var(--falk-sand) !important;
  transition: color 0.15s ease !important;
}

/* Hover: lett mørkning */
.navigation-panel .column-link:hover,
.navigation-panel .column-link:focus {
  color: var(--falk-sort) !important;
  background: var(--falk-hover-bg) !important;
}

.navigation-panel .column-link:hover svg,
.navigation-panel .column-link:hover .icon {
  color: var(--falk-sort) !important;
}

/* Aktiv: sort + fet */
.navigation-panel .column-link.active {
  color: var(--falk-sort) !important;
  font-weight: 700 !important;
  background: var(--falk-hover-bg) !important;
}

.navigation-panel .column-link.active svg,
.navigation-panel .column-link.active .icon {
  color: var(--falk-sort) !important;
}

/* Skillelinje */
.navigation-panel hr {
  border-color: rgba(0, 0, 0, 0.10) !important;
}


/* =====================
   3. MASTODON-LOGO I SIDEBAR
   «🦅 FALK CAFÉ» — sort på krem
   ===================== */

.column-link--logo {
  font-size: 0 !important;
}

.column-link--logo::before {
  content: '🦅 FALK CAFÉ' !important;
  font-size: 14px !important;
  font-family: 'Jost', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: var(--falk-sort) !important;
}

.column-link--logo svg,
.column-link--logo .logo,
.column-link--logo img,
.logo-symbol-wordmark {
  display: none !important;
}

/* Logo-vipp ved hover */
@keyframes falk-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-4deg); }
  75%      { transform: rotate(4deg); }
}

.column-link--logo::before {
  display: inline-block !important;
  transition: transform 0.2s ease !important;
}

.column-link--logo:hover::before {
  animation: falk-wiggle 0.4s ease-in-out !important;
}


/* =====================
   4. COMPOSE-PANEL (venstre) — KREM BAKGRUNN
   ===================== */

.columns-area__panels__pane--start .columns-area__panels__pane__inner,
.drawer,
.drawer__inner,
.drawer__inner__mastodon {
  background: var(--falk-krem) !important;
}

/* Kontoinfo */
.account__bar .display-name strong {
  color: var(--falk-sort) !important;
  font-family: 'Jost', sans-serif !important;
}

.account__bar .display-name span:last-child,
.account__bar .account__username {
  color: var(--falk-sand) !important;
}

/* Søkefelt */
.search__input,
.search .search__input {
  background: var(--falk-input-bg) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: var(--falk-sort) !important;
}

.search__input::placeholder {
  color: var(--falk-sand) !important;
}

.search__input:focus,
.search .search__input:focus {
  border-color: var(--falk-sort) !important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08) !important;
}

/* Textarea */
.compose-form .autosuggest-textarea__textarea,
.compose-form__textarea {
  background: var(--falk-input-bg) !important;
  color: var(--falk-sort) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}

.compose-form .autosuggest-textarea__textarea::placeholder {
  color: var(--falk-sand) !important;
}

.compose-form .autosuggest-textarea__textarea:focus,
.compose-form .spoiler-input__input:focus {
  border-color: var(--falk-sort) !important;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08) !important;
  outline: none !important;
}

/* Ikonknapper i compose */
.compose-form__buttons .icon-button,
.compose-form__buttons button {
  color: var(--falk-sand) !important;
  transition: color 0.15s ease !important;
}

.compose-form__buttons .icon-button:hover,
.compose-form__buttons button:hover {
  color: var(--falk-sort) !important;
}

/* Dropdown-knapper (offentlig/norsk) */
.compose-form .dropdown-button,
.compose-form .privacy-dropdown__value,
.compose-form .language-dropdown__value {
  color: var(--falk-gra) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}


/* =====================
   5. FALK-STRIPE
   Fem-fargers signaturstripe øverst
   Sort / Sand / Cyan / Krem / Grå
   ===================== */

@keyframes falk-stripe-glide {
  0%   { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

body::before {
  content: '' !important;
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(
    to right,
    #000000 0% 10%,
    #A09074 10% 20%,
    #00FFFF 20% 30%,
    #ECE7DC 30% 40%,
    #4D4D4D 40% 50%,
    #000000 50% 60%,
    #A09074 60% 70%,
    #00FFFF 70% 80%,
    #ECE7DC 80% 90%,
    #4D4D4D 90% 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: falk-stripe-glide 30s linear infinite !important;
  z-index: 9999 !important;
  pointer-events: none !important;
}

/* Respekter brukere som har skrudd av animasjoner */
@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none !important;
  }
}


/* =====================
   6. FEED-INNHOLD
   Lenker og hashtags i tidslinja
   #006868 passerer WCAG AA på lys bakgrunn
   ===================== */

.status__content a,
.reply-indicator__content a,
.hashtag-bar a,
.mention {
  color: var(--falk-cyan-access) !important;
}

.status__content a:hover,
.reply-indicator__content a:hover,
.hashtag-bar a:hover {
  color: var(--falk-sort) !important;
  text-decoration: underline !important;
}


/* =====================
   7. TRENDER-SIDEBAR
   ===================== */

.trends__item__sparkline path:last-child {
  stroke: var(--falk-cyan-access) !important;
}

.trends__item__sparkline path:first-child {
  fill: rgba(0, 104, 104, 0.10) !important;
}

.trends__item__name a {
  color: var(--falk-cyan-access) !important;
}


/* =====================
   8. SKILLELINJER
   ===================== */

.status {
  border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}


/* =====================
   9. AVATARER
   Avrundede firkanter
   ===================== */

.account__avatar,
.account__avatar-overlay-base .account__avatar,
.account__avatar-overlay,
.account-gallery__item a {
  border-radius: 10px !important;
}


/* =====================
   10. KNAPPER GENERELT
   Sort + cyan border, inverterer ved hover
   ===================== */

.button:not(.button-secondary):not(.icon-button) {
  background: var(--falk-sort) !important;
  border: 1.5px solid var(--falk-sort) !important;
  color: var(--falk-krem) !important;
  border-radius: 6px !important;
  font-family: 'Jost', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

.button:not(.button-secondary):not(.icon-button):hover {
  background: var(--falk-gra) !important;
  border-color: var(--falk-gra) !important;
}


/* =====================
   11. ACTION BAR
   Boost, fav, svar
   ===================== */

.status__action-bar-button.active,
.icon-button.active {
  color: var(--falk-cyan-access) !important;
}

.icon-button:hover {
  color: var(--falk-sort) !important;
  transition: color 0.1s ease !important;
}

/* Sprett når boost/fav aktiveres */
@keyframes falk-bounce {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35) rotate(-8deg); }
  65%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}

.status__action-bar .icon-button.active,
.status__action-bar .icon-button.activate,
.icon-button.star-icon.active,
.icon-button.bookmark-icon.active {
  animation: falk-bounce 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Favoritt får en gyllen sand-tone når aktiv */
.icon-button.star-icon.active {
  color: var(--falk-sand) !important;
}

@media (prefers-reduced-motion: reduce) {
  .status__action-bar .icon-button.active,
  .icon-button.star-icon.active,
  .icon-button.bookmark-icon.active,
  .column-link--logo:hover::before,
  .compose-form__submit .button:hover::before,
  .compose-form__publish-button-wrapper .button:hover::before,
  .compose-form__actions .button.button--block:hover::before,
  .compose-form__actions > .button:last-child:hover::before {
    animation: none !important;
  }
}


/* =====================
   12. TYPOGRAFI
   Jost for display, DM Sans for brødtekst
   ===================== */

body,
.status__content,
.account__display-name,
.display-name {
  font-family: 'DM Sans', system-ui, sans-serif !important;
}

.display-name strong,
.account__display-name strong {
  font-family: 'Jost', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
}

.column-header__title {
  font-family: 'Jost', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}


/* =====================
   13. SCROLLBAR (Webkit)
   ===================== */

::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.20);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.35);
}


/* =====================
   FERDIG. 🦅
   ============================================ */