@charset "utf-8";

/*
 * Nölpeters hemsida — färgschemat är samma som den gamla sajten
 * (mörkröd botten, blågröna ramar), bara ombyggt till ett rörligt
 * Bootstrap-rutnät istället för fasta, absolutpositionerade tabeller.
 *
 * Filen är sorterad efter var reglerna hör hemma, i samma ordning som en
 * sida byggs upp: först tokens och sådant som gäller överallt, sedan
 * ramverket kring innehållet, sedan en sektion per sida.
 *
 *   1.  Tokens
 *   2.  Bas
 *   3.  Länkar på den blå innehållsytan
 *   4.  Splash — index.php
 *   5.  Ram, header och footer — main.php
 *   6.  Navigation — menu.php
 *   7.  Sidokolumner — photo_teaser.php, document_categories.php
 *   8.  Startsidan — pages/front.php
 *   9.  Historik — pages/history.php
 *   10. Kontaktuppgifter — pages/contact.php
 *   11. Dokumentvisning — pages/document.php
 *   12. Mediebiblioteket — pages/media.php
 *   13. Fotoalbum, publikt — pages/photos.php
 *   14. Fotoalbum, admin — pages/admin_photos.php
 *   15. Dokumentadmin — pages/admin_documents.php
 *   16. Ämbetsmannaadmin — pages/admin_officers.php
 *   17. Toast — js/main.js
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
  --nolpeter-red: #600;
  --nolpeter-blue: #369;

  /* Den vanligaste blå tonen i gfx/logo.gif — ramen runt innehållsytan. */
  --nolpeter-logo-blue: #000091;

  /* Agendarutans bakgrund på startsidan, både rubrik- och textcellen. */
  --nolpeter-yellow: #ffe747;

  /* Gamla sajtens #CCCCCC (se old/index.php) — splashramen, och den
   * nedtonade "Vakant"-texten på kontaktsidan. */
  --nolpeter-grey: #ccc;
  --nolpeter-white: #fff;
  --nolpeter-black: #000;

  /* Raderingsknappen i fotoadmin: ljusare rött än --nolpeter-red, som inte
   * hade synts mot den blå ytan. */
  --nolpeter-danger: #d9534f;
  --nolpeter-danger-hover: #c9302c;

  /* Samma värden som Bootstraps --bs-success/--bs-danger, men egna så att
   * toasten inte blir genomskinlig om Bootstraps stilmall inte laddas. */
  --toast-success: #198754;
  --toast-error: #dc3545;

  /*
   * Genomskinliga toner mot den blå innehållsytan. Hårlinjerna låg tidigare
   * på 25/30/35 % beroende på vem som skrev regeln; en enda ton räcker.
   */
  --line-on-blue: rgb(255 255 255 / 30%);
  --focus-ring-on-blue: rgb(255 255 255 / 40%);

  /* Två nivåer, medvetet olika: knappen ska läsa mörkare än ytan under. */
  --fill-dark: rgb(0 0 0 / 20%);
  --fill-dark-soft: rgb(0 0 0 / 15%);

  /* Lightboxens pilknappar, som ligger ovanpå själva fotot. */
  --overlay-dark: rgb(0 0 0 / 45%);
  --overlay-dark-strong: rgb(0 0 0 / 70%);

  /* Toastens skugga. */
  --shadow-dark: rgb(0 0 0 / 35%);

  /* Sidokolumnernas rubrik, kategorilista och hamburgerknapp delar bredd. */
  --side-column-width: 210px;

  /* Inbäddade filmer och kommentaren under dem, se sektion 12. */
  --video-width: 560px;

  /*
   * Hörnradier. --radius-outer används av #outliner-div och av logotyprutorna
   * som ska ligga kant i kant med den; de måste följas åt.
   */
  --radius-outer: 12px;
  --radius-card: 6px;
  --radius-sm: 4px;
}

/* ==========================================================================
   2. Bas
   ========================================================================== */

body {
  background-color: var(--nolpeter-red);
  color: var(--nolpeter-black);
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* ==========================================================================
   3. Länkar på den blå innehållsytan

   Bootstraps blå standardlänk är nästan oläslig mot --nolpeter-blue, så allt
   som ligger direkt på den ytan får vit text i stället. Samlat i en regel
   för att slippa en ny variant varje gång en sida läggs till — och för att
   basfärgerna ska stå före alla tillståndsregler, vilket är vad stylelints
   no-descending-specificity vill ha.
   ========================================================================== */

.site-nav .nav-link,
.admin-doc-tabs .nav-link,
#left-div a,
#right-div a,
#back-to-albums,
#back-to-album-list,
#media-page a,
#contact-page a,
#ot-page a {
  color: var(--nolpeter-white);
}

/*
 * Fetstilen gäller inte mediebiblioteket: dess #media-page a omsluter även
 * albumkorten, och font-weight ärvs ned i korttiteln (till skillnad från
 * color, som Bootstrap sätter explicit på .card).
 */
.site-nav .nav-link,
#left-div a,
#right-div a,
#back-to-albums,
#back-to-album-list {
  font-weight: bold;
}

/* ==========================================================================
   4. Splash — index.php
   ========================================================================== */

.splash-frame {
  background-color: var(--nolpeter-grey);
  border: 4px solid var(--nolpeter-red);
  border-radius: var(--radius-sm);
  margin: 24px;
  padding: 40px 60px;
  box-shadow:
    0 0 0 4px var(--nolpeter-white),
    0 0 0 8px var(--nolpeter-red),
    0 0 0 12px var(--nolpeter-white),
    0 0 0 16px var(--nolpeter-red);
}

.splash-title {
  font-size: 3rem;
  font-weight: bold;
}

.splash-updated {
  font-size: 1.5rem;
  font-weight: bold;
}

#splash-logo {
  width: 235px;
  height: 235px;
}

/* ==========================================================================
   5. Ram, header och footer — main.php
   ========================================================================== */

body.main-body {
  background-color: var(--nolpeter-black);
}

#outliner-div {
  width: 90%;
  margin: 20px auto;
  padding: 0;
  background-color: var(--nolpeter-logo-blue);
  border-radius: var(--radius-outer);
}

.header-logo {
  width: 120px;
  height: 120px;
}

.header-logo-col {
  background-color: var(--nolpeter-white);
  min-height: 140px;
}

/*
 * The white logo boxes sit flush in the two top corners of #outliner-div.
 * We can't just add overflow:hidden to round them along with the parent —
 * that would also clip the photo lightbox modal (position: fixed) that
 * lives inside #content-div. Round each corner explicitly instead, using
 * the same radius as the parent so they line up seamlessly.
 */
#header-row .header-logo-col:first-child {
  border-top-left-radius: var(--radius-outer);
}

#header-row .header-logo-col:last-child {
  border-top-right-radius: var(--radius-outer);
}

/*
 * Rubriken skalar med rutan den står i, inte med fönstret: under lg är rutan
 * en tredjedel av raden (col-4), och 1.75rem — som passar skrivbordets col-8 —
 * blir där fem rader text som är högre än logotyperna bredvid. cqi är procent
 * av containerns bredd, så samma regel gäller oavsett vilken kolumnbredd
 * rutan råkar ha; clamp() håller den läsbar nedåt och oförändrad uppåt.
 */
#header-title-col {
  container-type: inline-size;
}

#header-title-col h1 {
  color: var(--nolpeter-yellow);
  font-weight: bold;
  font-size: clamp(0.75rem, 9cqi, 1.75rem);
  margin: 0;
}

#content-div {
  background-color: var(--nolpeter-blue);
  padding: 15px;
  border-radius: var(--radius-sm);
  min-height: 500px;
}

/* Sidrubriken på innehållssidorna och adminsidorna: en klass, så att de
 * inte kan glida isär. */
.page-heading {
  color: var(--nolpeter-black);
  font-weight: bold;
  text-align: center;
}

/* Footerns "Admin" och "Logga ut" är <button> (modal-trigger respektive
 * POST-utloggning) men ska se ut som länkarna de ersatte. */
.footer-link-btn {
  font-size: inherit;
  vertical-align: baseline;
  border: 0;
}

#site-footer,
#site-footer a,
#site-footer .footer-link-btn {
  color: var(--nolpeter-white);
}

/* Login-modalen i main.php ska matcha index.php:s röda splashsida
 * istället för Bootstraps vita standardbakgrund. */
#login-modal .modal-content {
  background-color: var(--nolpeter-red);
  color: var(--nolpeter-white);
}

#login-modal .modal-header,
#login-modal .modal-footer {
  border-color: var(--nolpeter-white);
}

#login-modal .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ==========================================================================
   6. Navigation — menu.php
   ========================================================================== */

#protected-nav {
  margin-top: 0.5rem;
}

.site-nav .nav-link.active,
.site-nav .nav-link:hover {
  background-color: var(--nolpeter-blue);
  color: var(--nolpeter-white);
}

/* ==========================================================================
   7. Sidokolumner — photo_teaser.php, document_categories.php
   ========================================================================== */

/* Kolumnerna ligger på den blå ytan, så all text i dem är vit — inte bara
 * länkarna (de får dessutom fetstil, se sektion 3). */
#left-div,
#right-div {
  color: var(--nolpeter-white);
}

/* Länkarna är vänsterställda sinsemellan, men blocket de bildar står
 * centrerat i kolumnen: fit-content krymper <nav> till den längsta länken,
 * och auto-marginalerna centrerar den. */
#side-links {
  width: fit-content;
  margin-inline: auto;
  text-align: left;
}

/* Vänsterkolumnens länkar, en per rad. 1.5rem är en rad brödtext, alltså
 * den tomrad som två radbrytningar ger. Ingen understrykning, inte heller
 * vid hover. */
#side-links a {
  display: block;
  text-decoration: none;
}

#side-links a + a {
  margin-top: 1.5rem;
}

/* Rubriken överst i vardera sidokolumnen. Samma bredd som kategoriknapparna
 * i dokumentkolumnen, så att den står centrerad över listan och inte
 * över hela kolumnen. */
.side-heading {
  width: 100%;
  max-width: var(--side-column-width);
  margin: 0 auto 1rem;

  /* Kategoriknapparnas 0.85rem ökat med 25 % två gånger; får bryta på två
   * rader. */
  font-size: 1.33rem;
  color: var(--nolpeter-yellow);
  font-weight: bold;
  text-align: center;
}

.doc-accordion {
  width: 100%;
  max-width: var(--side-column-width);
  margin: 0 auto;
}

/* Hamburgerknappen som fäller ut listan under lg — se document_categories.php.
   Samma bredd och utseende som en kategorirubrik, så att den läses som
   listans egen rubrik och inte som en främmande kontroll. */
.doc-menu-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: var(--side-column-width);
  margin: 0 auto;
  padding: 0.5rem 0.9rem;
  background-color: var(--fill-dark);
  color: var(--nolpeter-white);
  font-weight: bold;
  font-size: 0.85rem;
  border: 1px solid var(--line-on-blue);
  border-radius: var(--radius-card);
}

.doc-menu-toggle:not(.collapsed) {
  background-color: var(--nolpeter-blue);
  margin-bottom: 8px;
}

.doc-menu-toggle:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.2rem var(--focus-ring-on-blue);
}

.doc-menu-toggle-icon {
  width: 1.1rem;
  height: 1.1rem;
}

.doc-accordion .accordion-item {
  background-color: transparent;
  border: 1px solid var(--line-on-blue);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.doc-accordion .accordion-item + .accordion-item {
  margin-top: 8px;
}

.doc-accordion .accordion-button {
  background-color: var(--fill-dark);
  color: var(--nolpeter-white);
  font-weight: bold;
  font-size: 0.85rem;
  padding: 0.5rem 0.9rem;
  box-shadow: none;
}

.doc-accordion .accordion-button:not(.collapsed) {
  background-color: var(--nolpeter-blue);
  color: var(--nolpeter-white);
}

.doc-accordion .accordion-button:focus {
  box-shadow: 0 0 0 0.2rem var(--focus-ring-on-blue);
}

.doc-accordion .accordion-button::after {
  filter: invert(1) grayscale(1) brightness(2);
}

.doc-accordion .accordion-body {
  background-color: var(--fill-dark-soft);
  padding: 0.4rem 0.9rem;
  max-height: 270px;
  overflow-y: auto;
  scrollbar-width: thin;
}

#document-categories a.doc-link {
  display: block;
  padding: 6px 0 6px 0.5rem;
  font-weight: normal;
  font-size: 0.65rem;
  text-decoration: none;
}

/* ID:t måste med: basregeln ovan är #-specifik, så en ren .doc-link:hover
 * hade förlorat mot dess text-decoration: none. */
#document-categories a.doc-link:hover {
  color: var(--nolpeter-white);
  text-decoration: underline;
}

/* ==========================================================================
   8. Startsidan — pages/front.php
   ========================================================================== */

/* Startsidan ligger på samma blå yta som resten av sajten. Texten utanför
 * agendarutan (besöksräknaren) står direkt på ytan och måste därför vara vit;
 * rutan sätter sin egen svarta. Klassen sätts av main.php utifrån routens
 * slug. */
#content-div.page-front {
  color: var(--nolpeter-white);
}

.agenda-card {
  background-color: var(--nolpeter-yellow);
  border: 0;

  /* 50 % av både bredd och höjd ger en ellips i stället för rundade hörn. */
  border-radius: 50%;
}

/* Rubriken står i samma cell som texten, skild från den med en tomrad:
 * 1.875rem är en rad av rutans brödtext (1.25rem × radhöjd 1.5), alltså vad
 * två radbrytningar ger. */
.agenda-title {
  margin-bottom: 1.875rem;
  text-transform: uppercase;

  /* 15 % större än brödtexten i rutan. */
  font-size: 1.15em;
}

/* Texten är en rektangel i en ellips, så den behöver luft åt alla håll för
 * att hörnen inte ska sticka ut: en ellips rymmer en rektangel på ca 70 % av
 * sin bredd och höjd, därav 15 % i sidled. */
.agenda-card .card-body {
  padding: 3.5rem 15%;
  color: var(--nolpeter-black);

  /* 25 % större än sidans brödtext. Rubriken anger sin storlek i em och
   * följer därför med. */
  font-size: 1.25rem;
  text-align: center;
  font-weight: bold;
}

/* Pennikonen bredvid Agenda-rubriken, bara synlig för inloggad admin.
 * Absolut placerad så att rubriken förblir centrerad. */
.agenda-edit-btn {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  padding: 0 0.35rem;
  color: var(--nolpeter-black);
  line-height: 1;
  opacity: 0.7;
  transform: translateY(-50%);
}

.agenda-edit-btn:hover,
.agenda-edit-btn:focus {
  color: var(--nolpeter-black);
  opacity: 1;
}

/* ==========================================================================
   9. Historik — pages/history.php
   ========================================================================== */

/* Sidan är ren löptext direkt på den blå ytan, så hela ytan får vit text.
 * Tabellen måste få den separat: Bootstrap sätter .table-färgen explicit. */
#content-div.page-history {
  color: var(--nolpeter-white);
}

.history-scores {
  --bs-table-bg: transparent;
  --bs-table-color: var(--nolpeter-white);

  border: 1px solid var(--nolpeter-white);
}

/* ==========================================================================
   10. Kontaktuppgifter — pages/contact.php

   Ett rutnät av celler, en per aktivt ämbete: titel överst, namn och
   mejladress mindre under. Bootstrap-rutnät i stället för en <table>, så
   att cellerna radbryter till en spalt på en telefon — ett riktigt
   tabellelement hade tvingat fram sidled-scroll där.

   pages/ot.php delar utseendet — en ruta per år i stället för per ämbete —
   och står därför med i samma regler i stället för att upprepa dem.
   ========================================================================== */

.contact-cell,
.ot-cell {
  border: 1px solid var(--line-on-blue);
  border-radius: var(--radius-card);
  background-color: var(--fill-dark-soft);
  padding: 0.6rem 0.8rem;
}

.contact-role,
.ot-year {
  color: var(--nolpeter-white);
  font-weight: bold;
}

.contact-role {
  font-size: 0.9rem;
}

/* Namn och adress delar storlek — adressen ska inte läsa som en fotnot
 * under namnet, den är sidans faktiska innehåll. */
.contact-name,
.contact-mail {
  font-size: 0.8rem;
  line-height: 1.5;
}

.contact-name {
  color: var(--nolpeter-white);
}

.contact-vacant {
  font-style: italic;
  color: var(--nolpeter-grey);
}

.contact-mail,
.ot-link {
  display: block;
  text-decoration: none;
}

/* Strecket framför varje dokument i en årsruta. */
.ot-link::before {
  content: "- ";
}

.contact-mail-all {
  font-size: 0.9rem;
  font-weight: bold;
  text-decoration: none;
}

.contact-mail:hover,
.contact-mail:focus,
.contact-mail-all:hover,
.contact-mail-all:focus,
.ot-link:hover,
.ot-link:focus {
  text-decoration: underline;
}

/* ==========================================================================
   11. Dokumentvisning — pages/document.php
   ========================================================================== */

.document-viewer-header .document-download-btn {
  flex-shrink: 0;
  margin-left: 1rem;
}

/* Höjden är precis högre än en A4-sida (297mm), så hela förstasidan syns
 * utan att webbläsarens inbyggda PDF-verktygsfält tränger undan innehållet. */
.document-viewer-frame {
  display: block;
  width: 100%;
  height: calc(297mm + 3rem);
  border: 0;
  border-radius: var(--radius-sm);
  background-color: var(--nolpeter-white);
}

/* ==========================================================================
   12. Mediebiblioteket — pages/media.php
   ========================================================================== */

#media-page a:hover,
#media-page a:focus {
  color: var(--nolpeter-white);
  text-decoration: underline;
}

/* Underrubriker, filmtitlar och kommentarer står direkt på den blå ytan.
 * Sidrubriken (.page-heading) och albumkorten sätter sina egna färger. */
#content-div.page-media {
  color: var(--nolpeter-white);
}

/* Linjen mellan fotoalbumen och videorna. Helvit, till skillnad från
 * avskiljarna mellan filmerna: den delar sidan i två, inte en lista i poster.
 * opacity nollställer Bootstraps 25 % på <hr>. */
.media-divider {
  width: 50%;
  margin: 2rem auto;
  border-top: 1px solid var(--nolpeter-white);
  opacity: 1;
}

/* Videorna ligger tre i bredd från lg och staplas under det, se rutnätet i
 * media.php. Titeln får ingen egen färg: den ärver sidans vita text, samma
 * som rubrikerna över den. */
.video-item {
  text-align: center;
}

/* Avskiljaren mellan filmerna: en linje över halva bredden, ritad som
 * pseudoelement så att den bara finns mellan två filmer och aldrig efter
 * den sista. Bara i det staplade läget — sida vid sida hade den hamnat
 * ovanför film två och tre och skjutit ner dem under den första. */
@media (width < 992px) {
  .video-item + .video-item::before {
    content: "";
    display: block;
    width: 50%;
    margin: 1.25rem auto;
    border-top: 1px solid var(--line-on-blue);
  }
}

/* Samma bredd som filmen, så att en lång kommentar inte blir bredare än
 * det den kommenterar. */
.video-comment {
  max-width: var(--video-width);
  margin: 0.5rem auto 0;
  font-size: 0.9rem;
}

/* .ratio är ett block, så text-align centrerar den inte — det gör
 * automarginalerna. */
.video-embed {
  max-width: var(--video-width);
  margin-inline: auto;
}

/* ==========================================================================
   13. Fotoalbum, publikt — pages/photos.php
   ========================================================================== */

/* Frontbilderna har olika format (och trophy.gif är stående), så korten
 * beskärs till en gemensam höjd i stället för att raden blir ojämn.
 * Används även av mediebibliotekets albumkort. */
.album-card-image {
  height: 180px;
  object-fit: cover;
  object-position: center;
}

/* Bildtexterna är upp till 150 tecken. I rutnätet klipps de till två rader
 * så att korten håller samma höjd; hela texten syns i lightboxen. */
.photo-caption {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  color: var(--nolpeter-white);
}

.photo-thumb {
  width: 100%;
  cursor: zoom-in;
}

.lightbox-image {
  max-height: 80vh;
}

.lightbox-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 2;
}

/* Pilarna ligger ovanpå bilden i stället för bredvid: på en telefon finns
 * ingen plats vid sidan om, och bilden är ändå centrerad. */
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  border: 0;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 2rem;
  line-height: 1;
  color: var(--nolpeter-white);
  background-color: var(--overlay-dark);
}

.lightbox-nav:hover {
  background-color: var(--overlay-dark-strong);
}

.lightbox-prev {
  left: 0.5rem;
}

.lightbox-next {
  right: 0.5rem;
}

/* ==========================================================================
   14. Fotoalbum, admin — pages/admin_photos.php
   ========================================================================== */

/* 90x60 är för litet för att avgöra vad bilden föreställer när man skriver
 * bildtext, så den är klickbar och öppnar den stora versionen. */
.photo-admin-thumb {
  width: 90px;
  height: 60px;
  object-fit: cover;
  flex-shrink: 0;
  cursor: zoom-in;
}

/* Bara handtaget startar ett drag — raden görs draggable först vid
 * mousedown på det, eftersom ett permanent draggable="true" gör textfältet
 * omarkerbart i Firefox. Se js/admin_photos.js. */
.photo-drag-handle,
.officer-drag-handle {
  cursor: grab;
  user-select: none;
  font-size: 1.25rem;
  line-height: 1;
  opacity: 0.6;
}

.photo-drag-handle:active,
.officer-drag-handle:active {
  cursor: grabbing;
}

.photo-row-dragging,
.officer-row-dragging {
  opacity: 0.4;
}

/* Röd knapp med svart text: raderingen ska sticka ut mot den blå
 * innehållsytan, och Bootstraps btn-danger har vit text som drunknar i
 * rött. Färgen upprepas i :hover eftersom Bootstraps egen .btn:hover
 * annars vinner på specificitet. */
.btn-delete-album,
.btn-delete-album:focus {
  background-color: var(--nolpeter-danger);
  border-color: var(--nolpeter-danger);
  color: var(--nolpeter-black);
}

.btn-delete-album:hover {
  background-color: var(--nolpeter-danger-hover);
  border-color: var(--nolpeter-danger-hover);
  color: var(--nolpeter-black);
}

/* ==========================================================================
   15. Dokumentadmin — pages/admin_documents.php
   ========================================================================== */

/* Basfärgen sätts i sektion 3. Hover/focus upprepar den för att slå
 * Bootstraps .nav-link:hover, som ligger på samma specificitet. */
.admin-doc-tabs .nav-link:hover,
.admin-doc-tabs .nav-link:focus {
  color: var(--nolpeter-white);
}

/* Aktiv flik har vit botten från Bootstrap — då behövs svart text. */
.admin-doc-tabs .nav-link.active {
  color: var(--nolpeter-black);
}

/* ==========================================================================
   16. Ämbetsmannaadmin — pages/admin_officers.php

   Tabellen ska smälta in i den blå content-ytan, men inmatningsfälten
   behåller Bootstraps vita bakgrund. Draghandtaget delar regler med
   bildlistans, se sektion 14.
   ========================================================================== */

.admin-officers-table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--nolpeter-white);
  --bs-table-border-color: var(--line-on-blue);

  color: var(--nolpeter-white);
}

.admin-officers-table .officer-updated {
  white-space: nowrap;
  font-size: 0.85rem;
  opacity: 0.85;
}

/* ==========================================================================
   17. Toast — renderade av showToast() i js/main.js
   ========================================================================== */

#toast-container {
  position: fixed;
  top: 1rem;
  left: 50%;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  transform: translateX(-50%);
  pointer-events: none;
}

.site-toast {
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius-card);
  box-shadow: 0 4px 12px var(--shadow-dark);
  color: var(--nolpeter-white);
  font-size: 0.9rem;
  opacity: 1;
  transition: opacity 0.4s ease;
  pointer-events: auto;
}

.site-toast-success {
  background-color: var(--toast-success);
}

.site-toast-error {
  background-color: var(--toast-error);
}

.site-toast-leaving {
  opacity: 0;
}