/*
 * Grafit – úpravy Pleroma-FE (2.7) pro čitelnost a mobil.
 * Doplňuje téma static/themes/grafit.json; barvy bere z proměnných,
 * které generuje engine témat, takže funguje i s jinými tmavými tématy.
 * Do stránky se vkládá přes nginx (viz nginx/pleroma-custom-css.conf).
 */

/* ---------- Základ ---------- */

:root {
  /* Výchozí velikost písma = výchozí velikost písma prohlížeče (obvykle 16 px),
     stejně jako ve Static FE. Vlastní nastavení v Nastavení → Vzhled ji přebije. */
  --textSize: 100%;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --monoFont: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --post-line-height: 1.6;
  --status-margin: 1em;
}

html {
  background: #0a0a0b;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  text-rendering: optimizeLegibility;
}

/* Bez tapety – jednolité pozadí pro přihlášené i návštěvníky */
.app-bg-wrapper {
  background-image: none !important;
  background-color: #0a0a0b !important;
}
.underlay {
  background-color: transparent !important;
}
/* Bez banneru v profilových kartách (vlastní panel, profily, náhledy uživatelů) */
.user-card .background-image {
  display: none;
}

/* Hlavní sloupec o něco širší, aby se delší texty četly jako článek */
.app-layout {
  --maxiColumn: 42rem;
  --columnGap: 1.25rem;
}

/* ---------- Panely ---------- */

.panel {
  border: 1px solid var(--border);
}
.panel .panel-heading {
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Štítky (např. „Správce“) – engine dává bílý text na světle šedou */
.alert.neutral {
  background-color: #2e2e32 !important;
  border: 1px solid #4a4a50;
  color: #e6e6e8 !important;
}

/* ---------- Příspěvky ---------- */

.Status .status-container {
  padding: var(--status-margin);
}
.Status .status-heading {
  margin-bottom: 0.6em;
}
.Status .timeago,
.Status .heading-reply-row,
.Status .heading-edited-row {
  color: var(--faint);
}

/* Oddělení příspěvků v timeline */
.Timeline .timeline-body > * + *,
.Conversation + .Conversation {
  border-top: 1px solid var(--border);
}

/* Dlouhé příspěvky nesbalovat – u blogu chceme celý text */
.StatusBody .text-wrapper.-tall-status {
  height: auto !important;
  overflow: visible !important;
}
.StatusBody .text-wrapper.-tall-status .media-body {
  -webkit-mask: none !important;
  mask: none !important;
}
.StatusBody .tall-status-hider {
  display: none !important;
}

/* ---------- Typografie obsahu ---------- */

.StatusBody .text,
.user-card-bio {
  font-size: 1.0625rem;
  line-height: var(--post-line-height);
}
.user-card-bio {
  line-height: 1.5;
}

.RichContent p {
  margin: 0 0 0.9em;
}
.RichContent p:last-child {
  margin-bottom: 0;
}

/* Nadpisy v Markdownu – skutečná hierarchie místo jednotného 1.1em */
.RichContent h1,
.RichContent h2,
.RichContent h3,
.RichContent h4 {
  color: var(--text);
  font-weight: 650;
  line-height: 1.25;
  margin: 1.3em 0 0.5em;
}
.RichContent h1 { font-size: 1.6em; }
.RichContent h2 { font-size: 1.35em; }
.RichContent h3 { font-size: 1.15em; }
.RichContent h4 { font-size: 1em; }
.RichContent > :is(h1, h2, h3, h4):first-child {
  margin-top: 0.2em;
}

/* Odkazy v textu podtržené – rozlišitelné i bez barvy */
.StatusBody .RichContent a:not(.mention):not(.hashtag):not(.MentionLink a),
.user-card-bio a:not(.mention):not(.hashtag) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.StatusBody .RichContent a:hover {
  text-decoration-thickness: 2px;
}

.RichContent ul,
.RichContent ol {
  margin: 0 0 0.9em;
  padding-left: 1.5em;
}
.RichContent li + li {
  margin-top: 0.25em;
}

.RichContent blockquote {
  border-left: 3px solid var(--border);
  color: var(--textFaint, var(--text));
  font-style: normal;
  margin: 0 0 0.9em;
  padding: 0.1em 0 0.1em 1em;
}

.RichContent code,
.RichContent kbd,
.RichContent samp {
  background: rgba(255, 255, 255, 0.07);
  border-radius: 4px;
  font-size: 0.9em;
  padding: 0.1em 0.35em;
}
.RichContent pre {
  background: #0c0c0d;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.9em;
  line-height: 1.5;
  margin: 0 0 0.9em;
  padding: 0.8em 1em;
  white-space: pre;
}
.RichContent pre code {
  background: none;
  padding: 0;
}

.RichContent hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 1.5em 0;
}

.RichContent .img,
.RichContent img:not(.emoji) {
  border-radius: 8px;
}

/* Přílohy a náhledy odkazů */
.Attachment {
  border-radius: 8px;
  overflow: hidden;
}
.link-preview-card {
  border-radius: 8px;
}

/* ---------- Ovládání a přístupnost ---------- */

/* Viditelný fokus pro klávesnici (FE ho u tlačítek vypíná) */
:is(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--link) !important;
  outline-offset: 2px;
}

/* Akce pod příspěvkem – větší plochy pro prst */
.Status .status-actions {
  margin-top: 0.75em;
}
.Status .status-actions > * {
  max-width: 4.5em;
}
.Status .status-actions .button-unstyled {
  margin: -8px;
  padding: 8px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Mobil (FE přepíná layout na 800px) ---------- */

@media (max-width: 800px) {
  :root {
    --status-margin: 0.85em;
  }

  /* Panely přes celou šířku, bez zaoblení a bočních okrajů */
  .app-layout {
    --columnGap: 0;
  }
  .app-layout .column {
    padding-top: 0;
  }
  .panel {
    border-left: 0;
    border-right: 0;
    border-radius: 0 !important;
  }
  .panel .panel-heading {
    border-radius: 0 !important;
  }

  .Status .post-avatar {
    height: 40px;
    width: 40px;
  }
  .Status .left-side {
    margin-right: 0.7em;
  }

  .RichContent pre {
    font-size: 0.85em;
  }
}

/* =====================================================================
 * Přihlášený uživatel na desktopu: bez horní lišty
 *
 * Ikony z lišty (hledání, nastavení, administrace, odhlášení) se ukotví
 * pod panel s profilem a formulářem nového příspěvku. CSS neumí prvek
 * přesunout v DOM, proto CSS anchor positioning; prohlížeče bez něj
 * ponechají lištu beze změny. Mobil zůstává (lišta je tam hlavní navigace).
 * ===================================================================== */

@supports (anchor-name: --a) {
  #app-loaded:has(.user-panel .signed-in):has(.DesktopNav) {
    & .app-layout {
      --navbar-height: 0px;
    }
    & .user-panel {
      anchor-name: --grafit-user-panel;
      /* místo pro řádek s ikonami */
      margin-bottom: 3.5rem;
    }

    & .DesktopNav {
      background: none !important;
      box-shadow: none !important;
      height: 0;
      overflow: visible;
      /* Lišta má z-index 7000, nad vyskakovacími okny (6000: emoji,
         viditelnost…), takže by je řádek s ikonami překrýval. Stačí být
         nad sloupci layoutu. */
      z-index: 20 !important;
    }
    & .DesktopNav .inner-nav {
      display: block;
      height: 0;
      padding: 0;
    }
    & .DesktopNav .sitename,
    & .DesktopNav .logo,
    & .DesktopNav .actions > .spacer {
      display: none;
    }
    & .DesktopNav .actions {
      position: fixed;
      position-anchor: --grafit-user-panel;
      top: calc(anchor(bottom) + 0.6rem);
      left: anchor(left);
      width: anchor-size(width);
      box-sizing: border-box;
      height: 2.9rem;
      line-height: 2.9rem;
      justify-content: space-evenly;
      background: #131314;
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: visible;
    }
    /* Rozbalené hledání vyplní celý řádek, ostatní ikony se zatím schovají */
    & .DesktopNav .actions:has(.SearchBar.-expanded) > :not(.SearchBar) {
      display: none;
    }
    & .DesktopNav .actions .SearchBar.-expanded {
      box-sizing: border-box;
      padding: 0 0.5em;
    }
    & .DesktopNav .actions .SearchBar.-expanded .search-bar-input {
      flex: 1 1 auto;
      min-width: 0;
    }
  }
}

/* =====================================================================
 * Blogový režim pro nepřihlášené návštěvníky
 *
 * Návštěvník se pozná podle přihlašovacího formuláře v postranním panelu
 * (.user-panel .login-form). Stránka /login je vyjmutá, aby se dalo
 * přihlásit – na ni vede odkaz jen ručně: https://social.severa.name/login
 * Prohlížeče bez :has() a CSS nestingu zobrazí běžné rozhraní.
 * ===================================================================== */

#app-loaded:has(.user-panel .login-form):not(:has(#main-scroller .login-form)) {

  /* --- Navigace --- */

  /* Bez horní lišty (desktop i mobil) a vysouvacího menu –
     hlavičkou blogu je profilová karta */
  & .DesktopNav,
  & .MobileNav,
  & .MobilePostButton {
    display: none;
  }
  & .app-layout {
    --navbar-height: 0px;
  }

  /* Bez postranních sloupců – jeden sloupec uprostřed */
  & #sidebar,
  & #notifs-column,
  & .login-hint {
    display: none;
  }
  & .app-layout {
    grid-template-areas: "content";
    grid-template-columns: minmax(0, var(--maxiColumn));
  }

  /* --- Profil jako hlavička blogu --- */

  & .user-card .user-card-bio:empty {
    display: none;
  }
  & .user-card .user-role,
  & .user-card .dailyAvg,
  & .user-card .user-counts {
    display: none;
  }
  /* Záložky Sledovaní / Sledující (Příspěvky a Média zůstávají) */
  & .user-profile .tabs:has(> .tab-wrapper:nth-child(4)) > .tab-wrapper:is(:nth-child(2), :nth-child(3)) {
    display: none;
  }
  & .user-profile .timeline-heading,
  & .conversation-heading {
    display: none;
  }

  /* --- Příspěvky --- */

  /* Bez tlačítek, která by stejně jen vyzvala k přihlášení */
  & .Status .status-actions,
  & .Status .EmojiReactions,
  & .Status .heading-right .visibility-icon,
  & .Status .heading-right > .button-unstyled {
    display: none;
  }

  /* Vlastní příspěvky bez avataru a jména – jen datum a text.
     Platí v seznamu příspěvků a pro první (kořenový) příspěvek detailu;
     komentáře ve vlákně si autora i avatar ponechají. */
  & .Conversation:not(.-expanded) .Status > .status-container.USER____segedacz:not(.repeat-info),
  & .Conversation.-expanded .thread-body > article:first-child > .Status:first-child > .status-container.USER____segedacz {
    & > .left-side,
    & .heading-left {
      display: none;
    }
    /* Datum zůstává vpravo jako u ostatních příspěvků */
    & .heading-name-row {
      justify-content: flex-end;
    }
    & .timeago {
      font-size: 0.9em;
    }
  }

  /* Otevřený příspěvek bez zvýraznění – v detailu vypadá stejně jako v seznamu */
  & .Conversation.-expanded .Status.-focused {
    background-color: inherit !important;
  }

  /* Detail příspěvku: odkaz zpět na blog pod kořenovým příspěvkem. CSS neumí přidat nový
     odkaz, proto se použije skrytý odkaz na profil z hlavičky příspěvku
     (display: contents ho vytáhne z hlavičky, order ho posune dolů). */
  & .Conversation.-expanded .thread-body > article:first-child > .Status:first-child > .status-container.USER____segedacz {
    & .right-side {
      display: flex;
      flex-direction: column;
    }
    & .status-heading,
    & .heading-name-row,
    & .heading-left {
      display: contents;
    }
    & .heading-right {
      align-self: flex-end;
      margin-bottom: 0.6em;
    }
    & .heading-left .status-username {
      display: none;
    }
    & .heading-left .account-name {
      order: 99;
      flex: none;
      align-self: stretch;
      margin: 1.25rem 0 0;
      padding-top: 1rem;
      border-top: 1px solid var(--border);
      font-size: 0;
    }
    & .heading-left .account-name::before {
      content: "← Všechny příspěvky";
      font-size: 0.95rem;
    }
  }

  /* Na profilu jen vlastní příspěvky: bez sdílení a odpovědí jiným.
     Odpovědi sám sobě (vlákna) zůstávají. Celý blok lze smazat. */
  & .user-profile .Conversation:has(.repeat-info),
  & .user-profile .Conversation:has(.heading-reply-row):not(:has(.heading-reply-row a[href*="segedacz"])) {
    display: none;
  }
}