MediaWiki:Common.css.bak: Difference between revisions

From softwear.directory
Jump to navigation Jump to search
No edit summary
No edit summary
 
Line 1: Line 1:
$(document).ready(function () {
/* ----->START------ FONTS  */
  // Global variables
@font-face {
  var cards = $(".card");
    font-family: 'HALColant-TextRegular';
  var showArticleWrapper = $("#show-article-wrapper");
    src: url('/fonts/HALColant-TextRegular.woff2') format('woff2'),
  var areFiltersActive = false;
        url('/fonts/HALColant-TextRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
* {
    color: #292828; /* Specific black color */
}


  // Make header-box in Home clickable
/* Change text color of links on hover */
  $(".head-box").click(function () {
a:hover {
    window.location.href = "/Main_Page"; // Redirects to the home page
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="4.5" fill="white" stroke="black" stroke-width="1" /></svg>') 14 14, auto;
  });
}


  // Loop through each card to format related articles
/* Change text color of links on focus */
  cards.each(function () {
a:focus {
     // Check if the card has related articles
     cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="4.5" fill="white" stroke="black" stroke-width="1" /></svg>') 14 14, auto;
    var relatedArticles = $(this).find(".related-articles");
}
    if (relatedArticles.length > 0) {
      // Get all the related article elements
      var relatedArticleElements = relatedArticles.find(".related-article");


      // Create an array to store unique related articles
html, body {
      var uniqueArticles = [];
    font-family: HALColant-TextRegular!important;
    background: #FAFAFA 0%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="4.5" fill="black" /></svg>') 14 14, auto;
}
html {
    scrollbar-width: none; /* Firefox */
}
body {
    background: #FAFAFA 0%;
    transition: background-color 1s ease;
}
::-webkit-scrollbar {
    display: none;
}
pre.mw-code.mw-css {
    font-family: sans-serif!important;
}
/* -----END<------ FONTS */


      // Loop through each related article element
/* ----->START------ GENERAL RULES FOR MEDIAWIKI SKIN  */
      relatedArticleElements.each(function () {
/* Page Margins */
        // Remove <p> tags from the article
.mw-body {
        $(this).find("p").remove();
    padding: 0 !important;
    margin-left: 0 !important;
    border: none;
    background: #FAFAFA 0%;
}
.mw-search-profile-tabs {
    display: none;
}
.mw-parser-output {
    background: #FAFAFA 0%;
    transition: background-color 1s ease;
    /*padding: 25px;*/
    padding: 1.3%;
}
#mw-searchoptions {
    display: none;
}
/* Hide Mediawiki logo */
#p-logo a {
    display: none;
}
/* Hide left vertical toolbar */
#mw-panel {
    display: none;
}
.mw-parser-output a.external {
    background-image: none;
}
.mw-search-result-data {
    display: none;
}
.mw-search-result-heading {
  font-size: 16pt;
  line-height: 27px;
  letter-spacing: 0.4px;
}
.mw-search-results li a {
  font-size: 16pt!important;
  line-height: 27px;
  letter-spacing: 0.4px;
  color: black;
  text-decoration: underline;
}
#mw-indicator-mw-helplink {
  display: none;
}
.mw-search-results-container h2 {
  display: none;
}
#mw-content-text .mw-search-results {
  margin-top: 0 !important;
 
}
.mw-search-results li {
  list-style: none;
  margin-bottom: 0 !important;
}
.results-info {
  display: none;
}
.vector-body p
{
  margin-top: 0px!important;
  margin-bottom: 0px!important;
}
#firstHeading {
    display: none;
}
.mw-footer {
    display: none;
}
a.mw-selflink {
    font-weight: normal;
    text-decoration: underline;
}
a.mw-selflink:hover {
    font-weight: normal;
    text-decoration: underline;
}
#mw-head {
    background-color: #FAFAFA;
    transition: background-color 1s ease;
    display: none;
}
.mw-body, #left-navigation, #mw-data-after-content, .mw-footer {
    margin-left: 0!important;
}
#mw-page-base {
    background-color: #FAFAFA;
    transition: background-color 1s ease;
    background-image: none;
    display: none;
}
#catlinks {
    display: none;
}
/* Don't display 3 vertical lines. This is loading of Mediawiki*/
.mw-indicators {
    display: none;
}
/* Don't display loading load spinner. This is loading of Semantic Mediawiki*/
.smw-overlay-spinner {
    display: none;
}
.mw-content-subtitle, #contentSub, #contentSub2 {
    display: none;
}
/* -----END<------ GENERAL RULES FOR MEDIAWIKI SKIN */


        // Convert the article HTML to a string
/* ------> STYLING HEADER */
        var articleHTML = $(this)[0].outerHTML;
.custom-navbar {
    display:none;
}
.logo p {
  font-size: 17px;
  line-height: 22px;
  letter-spacing: 0.37px;
  text-align: right;
  text-decoration: underline;
  margin-top: -0.33rem !important;
}
div.hf-header {
    position: fixed;
    top: 0;
    left: 0;
    width: -moz-available; /* For Firefox */
    width: -webkit-fill-available; /* For Chrome and Safari */
    background: transparent linear-gradient(180deg, #FAFAFA 0%, #FFFFFF00 100%) 0% 0% no-repeat padding-box;
    z-index: 9999;
    /*padding: 25px 25px 0 25px;*/
    padding: 1.3%;
}
div#hf-nsheader- {
    position: fixed;
    top: 0;
    left: 0;
    width: -moz-available; /* For Firefox */
    width: -webkit-fill-available; /* For Chrome and Safari */
    background: transparent linear-gradient(180deg, #FAFAFA 0%, #FFFFFF00 100%) 0% 0% no-repeat padding-box;
    z-index: 9999;
    /*padding: 25px 25px 0 25px;*/
    padding: 1.3%;
}
div#hf-nsheader-Special {
    position: fixed;
    top: 0;
    left: 0;
    width: -moz-available; /* For Firefox */
    width: -webkit-fill-available; /* For Chrome and Safari */
    background: transparent linear-gradient(180deg, #FAFAFA 0%, #FFFFFF00 100%) 0% 0% no-repeat padding-box;
    z-index: 9999;
    /*padding: 25px 25px 0 25px;*/
    padding: 1.3%;
}
#header-container {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    /*padding-bottom: 100px;*/
}
.head-col {
    width: calc(20% - 0px);
    box-sizing: border-box;
    height: fit-content;
    padding: 10px;
} 
.head-links.head-col {
  width: calc(20% - 3px);
}
.head-col-extend {
    box-sizing: border-box;
    height: fit-content;
}
.head-box {
    border: 1px solid black;
    background: #FAFAFA;
    z-index: 2;
    position: relative;
}
.head-box:hover {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="4.5" fill="white" stroke="black" stroke-width="1" /></svg>') 14 14, auto;
}
.head-nav {
    padding-left: 15px;
    padding-top: 5px;
    line-height: 23px;
}
.head-links {
    padding-top: 5px;
}


        // Check if the article HTML already exists in the uniqueArticles array
/* FILTERS HEADER */
        if ($.inArray(articleHTML, uniqueArticles) === -1) {
.head-filter.head-col-extend {
          // If it doesn't exist, add it to the uniqueArticles array
    width: calc(40% + 3px);
          uniqueArticles.push(articleHTML);
    overflow: hidden;
        }
}
      });
.container-filter-label-button {


      // Clear the content of the related articles container
}
      relatedArticles.empty();


      // Append the unique related articles back to the container
.buttons-filters {
      relatedArticles.append(uniqueArticles.join(""));
    font-size: 16px;
     }
    line-height: 20px;
  });
    letter-spacing: 0.35px;
    padding-bottom: 5px;
    display: grid;
    grid-template-columns: 1fr 1fr; /* two equal columns */
    align-items: center;
     gap: 10px;
}


   // Utility Functions
.count-filters-container {
   function sortChronologically() {
   border-bottom: 1px solid black;
    var cards = $(".list-container .card").get();
   padding-bottom: 5px;
}


    cards.sort(function (a, b) {
.count-filtered-cards {
      var numberA = parseInt(
  font-size: 17px;
        $(a).find(".entry-number").text().replace(/\[|\]/g, ""),
  line-height: 22px;
        10
  font-style: italic;
      );
  margin-top: 0;
      var numberB = parseInt(
  width: fit-content;
        $(b).find(".entry-number").text().replace(/\[|\]/g, ""),
}
        10
      );
      return numberB - numberA; // Descending order
    });


    $.each(cards, function (index, item) {
.count-filtered-cards span {
      $(".list-container").append(item);
  margin-right: 2px;
    });
  background-color: #EDEDED;
   }
   padding: 1px 3px;
}


  function randomizeCards(selector) {
    var cards = $(selector).get();


     var i = cards.length,
.reset-button {
      j,
   
      temp;
}
     while (--i > 0) {
.reset-button {
      j = Math.floor(Math.random() * (i + 1));
     justify-self: end;
      temp = cards[i];
}
      cards[i] = cards[j];
.open-close-button {
      cards[j] = temp;
    justify-self: start;
}
.reset-symbol {
  font-size: 20px;
}
.reset-filter {
    font-family: HALColant-TextRegular !important;
    background: none;
    border: none;
    font-size: 17px;
    line-height: 20px;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="4.5" fill="white" stroke="black" stroke-width="1" /></svg>') 14 14, auto;
    text-transform: uppercase;
}
.toggle-filters.general-toggle {
    font-family: HALColant-TextRegular !important;
    background: none;
    border: none;
    font-size: 17px;
    line-height: 20px;
     cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="4.5" fill="white" stroke="black" stroke-width="1" /></svg>') 14 14, auto;
    text-transform: uppercase;
    padding-left: 0!important;
}
.toggle-filters.open-filter {
    font-family: HALColant-TextRegular !important;
    position: absolute;
    background: none;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0px;
    border: none;
    padding: 5px 0;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="4.5" fill="white" stroke="black" stroke-width="1" /></svg>') 14 14, auto;
    text-decoration: underline;
    font-size: 17px;
    line-height: 22px;
    letter-spacing: 0.95px;
}
.toggle-filters.open-filter:hover {
    font-style: italic;
}
.filter-button {
    font-family: HALColant-TextRegular !important;
    padding: 0 !important;
    white-space: nowrap;
    background: rgb(237,237,237);
    margin-bottom: 5px;
    border: none;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="4.5" fill="white" stroke="black" stroke-width="1" /></svg>') 14 14, auto;
    font-size: 19px;
    line-height: 26px;
    letter-spacing: 0.95px;
}
.filter-button:hover {
    font-style: italic;
}
.values {
    display: none; /* Keep the filter values hidden initially */
    padding-top: 30px;
}
button.active {
    text-decoration: underline;
}
#filters {
    display: none; /* Hidden initially, will be shown on button click */
    width: 100%; /* Full width of the parent container */
    grid-template-columns: repeat(4, 1fr); /* Creates four columns with equal width */
    gap: 5px; /* Space between grid items */
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.5s ease, height 0.5s ease;
    height: 0;
    overflow: hidden;
    background: transparent linear-gradient(180deg,#FAFAFA 0%,#FFFFFF00 100%) 0% 0% no-repeat padding-box;
}
@media screen and (max-width: 1366px) {
    .toggle-filters.open-filter {
        font-size: 15px;
        line-height: 24px;
        letter-spacing: 0.95px;
     }
     }


     $.each(cards, function (index, item) {
     .filter-button {
      $(selector).parent().append(item);
        font-size: 16px;
    });
         line-height: 24px;
  }
         letter-spacing: 0.95px;
 
     }
  function sortAlphabetically(selector) {
    var cards = $(selector).get();
 
    cards.sort(function (a, b) {
      var titleA = $(a).find(".title").text().toUpperCase();
      var titleB = $(b).find(".title").text().toUpperCase();
      return titleA < titleB ? -1 : titleA > titleB ? 1 : 0;
    });
 
    $.each(cards, function (index, item) {
      $(selector).parent().append(item);
    });
  }
 
  function updateViews() {
    // Handle cards in the list view
    $(".home-chronicle-list div.list-container div.card:not(.event)").each(
      function () {
        if (!$(this).closest(".home-chronicle-block").length) {
          var title = $(this).find(".title").detach();
          var images = $(this).find(".images").detach();
 
          // Remove existing .title-images if it exists
          $(this).find(".title-images").remove();
 
          var titleImagesContainer = $(
            '<div class="title-images"></div>'
          ).append(images, title);
          $(this).find(".people").after(titleImagesContainer);
         }
      }
    );
 
    // Handle cards in the block view
    $(".home-chronicle-block div.list-container div.card:not(.event)").each(
      function () {
        // Remove .title-images container if it exists, re-attach .title and .images to their original places
        var titleImagesContainer = $(this).find(".title-images");
         if (titleImagesContainer.length) {
          var title = titleImagesContainer.find(".title").detach();
          var images = titleImagesContainer.find(".images").detach();
          titleImagesContainer.remove();
 
          $(this).find(".people").after(title);
          $(this).find(".type").after(images);
        } else {
          // If .title-images doesn't exist, ensure .images is placed correctly
          var images = $(this).find(".images").detach();
          $(this).find(".type").after(images);
        }
      }
    );
  }
 
  function processEventCards() {
    $(".card.event").each(function () {
      var $card = $(this);
      var existingContainer = $card.find(".container-people-date");
 
      // Create container if missing
      if (existingContainer.length === 0) {
        existingContainer = $('<div class="container-people-date"></div>');
        $card.append(existingContainer); // temp placement
      }
 
      // Detach people and date
      var people = $card.find(".people").detach();
      var date = $card.find(".date").detach();
 
      // BLOCK VIEW (gallery)
      if ($card.closest(".home-chronicle-block").length) {
        existingContainer.append(people).append(date);
 
        // Place container after title
        if (!existingContainer.is($card.find(".title").next())) {
          $card.find(".title").after(existingContainer);
        }
 
        // LIST VIEW
      } else if ($card.closest(".home-chronicle-list").length) {
        // Only append .people into container
        existingContainer.empty().append(people);
 
        // Place container before title
        $card.find(".title").before(existingContainer);
 
        // Place date after title
        $card.find(".title").after(date);
      }
     });
  }
 
  if ($("#home").length > 0) {
    // This code will only run only on the homepage.
    $(".home-block-view").show();
    $(".home-chronicle-block-button, .home-block-view-button").addClass(
      "active-view-button"
    );
 
    // Initially hide list view sorting buttons and set the default sorted view for block
    $(
      ".home-chronicle-list-button, .home-random-list-button, .home-alphabetical-list-button"
    ).hide();
    sortChronologically(); // Sort the block view chronologically by default


     updateLastVisibleCard();
     #filters {
    updateWidthBlockView();
         grid-template-columns: 0.65fr 0.8fr 1fr 1fr;  
    processEventCards();
    updateViews();
 
    $(".home-list-view-button").click(function () {
      $(".home-list-sorting-buttons").css("display", "flex");
      // Switching view classes
      $(".home-block-view")
         .removeClass("home-block-view")
        .addClass("home-list-view");
      // Additional class switch
      $(".home-chronicle-block")
        .removeClass("home-chronicle-block")
        .addClass("home-chronicle-list");
      // Toggling visibility of buttons
      $(
        ".home-chronicle-block-button, .home-random-block-button, .home-alphabetical-block-button"
      ).hide();
      $(
        ".home-chronicle-list-button, .home-random-list-button, .home-alphabetical-list-button"
      ).show();
      updateLastVisibleCard();
      updateWidthBlockView();
      processEventCards();
      updateViews();
 
      // Remove active class from block view button and add to list view button
      $(".home-block-view-button").removeClass("active-view-button");
      $(".home-list-view-button").addClass("active-view-button");
 
      // Conditional checks for transferring the active class from block to list buttons
      if ($(".home-chronicle-block-button").hasClass("active-view-button")) {
        $(".home-chronicle-block-button").removeClass("active-view-button");
        $(".home-chronicle-list-button").addClass("active-view-button");
      } else if (
        $(".home-random-block-button").hasClass("active-view-button")
      ) {
        $(".home-random-block-button").removeClass("active-view-button");
        $(".home-random-list-button").addClass("active-view-button");
      } else if (
        $(".home-alphabetical-block-button").hasClass("active-view-button")
      ) {
        $(".home-alphabetical-block-button").removeClass("active-view-button");
        $(".home-alphabetical-list-button").addClass("active-view-button");
      }
    });
 
    $(".home-block-view-button").click(function () {
      console.log("Block view button clicked.");
      $(".home-list-sorting-buttons").hide(); // Hide list sorting buttons
      $(".home-list-view")
        .removeClass("home-list-view")
        .addClass("home-block-view");
      $(".home-chronicle-list")
        .removeClass("home-chronicle-list")
        .addClass("home-chronicle-block");
      $(
        ".home-chronicle-block-button, .home-random-block-button, .home-alphabetical-block-button"
      ).show();
      $(
        ".home-chronicle-list-button, .home-random-list-button, .home-alphabetical-list-button"
      ).hide();
      updateLastVisibleCard();
      updateWidthBlockView();
      processEventCards();
      updateViews();
      $(".home-list-view-button").removeClass("active-view-button");
      $(".home-block-view-button").addClass("active-view-button");
 
      // Conditional checks for transferring the active class from block to list buttons
      if ($(".home-chronicle-list-button").hasClass("active-view-button")) {
        $(".home-chronicle-list-button").removeClass("active-view-button");
        $(".home-chronicle-block-button").addClass("active-view-button");
      } else if ($(".home-random-list-button").hasClass("active-view-button")) {
        $(".home-random-list-button").removeClass("active-view-button");
        $(".home-random-block-button").addClass("active-view-button");
      } else if (
        $(".home-alphabetical-list-button").hasClass("active-view-button")
      ) {
        $(".home-alphabetical-list-button").removeClass("active-view-button");
        $(".home-alphabetical-block-button").addClass("active-view-button");
      }
    });
 
    // BLOCK VIEW SORTING BUTTONS
    $(".home-chronicle-block-button").click(function () {
      sortChronologically();
 
      updateLastVisibleCard();
      updateWidthBlockView();
      processEventCards();
      updateViews();
      $(".home-chronicle-block-button").addClass("active-view-button");
      $(".home-random-block-button").removeClass("active-view-button");
      $(".home-alphabetical-block-button").removeClass("active-view-button");
    });
 
    $(".home-random-block-button").click(function () {
      randomizeCards(".list-container .card");
 
      updateLastVisibleCard();
      updateWidthBlockView();
      processEventCards();
      updateViews();
      $(".home-random-block-button").addClass("active-view-button");
      $(".home-chronicle-block-button").removeClass("active-view-button");
      $(".home-alphabetical-block-button").removeClass("active-view-button");
    });
 
    $(".home-alphabetical-block-button").click(function () {
      sortAlphabetically(".list-container .card");
 
      updateLastVisibleCard();
      updateWidthBlockView();
      processEventCards();
      updateViews();
      $(".home-alphabetical-block-button").addClass("active-view-button");
      $(".home-chronicle-block-button").removeClass("active-view-button");
      $(".home-random-block-button").removeClass("active-view-button");
    });
 
    // LIST VIEW SORTING BUTTONS
    $(".home-chronicle-list-button").click(function () {
      sortChronologically();
 
      updateLastVisibleCard();
      updateWidthBlockView();
      processEventCards();
      updateViews();
      $(".home-chronicle-list-button").addClass("active-view-button");
      $(".home-random-list-button").removeClass("active-view-button");
      $(".home-alphabetical-list-button").removeClass("active-view-button");
    });
 
    $(".home-random-list-button").click(function () {
      randomizeCards(".list-container .card");
 
      updateLastVisibleCard();
      updateWidthBlockView();
      processEventCards();
      updateViews();
      $(".home-random-list-button").addClass("active-view-button");
      $(".home-chronicle-list-button").removeClass("active-view-button");
      $(".home-alphabetical-list-button").removeClass("active-view-button");
    });
 
    $(".home-alphabetical-list-button").click(function () {
      sortAlphabetically(".list-container .card");
 
      updateLastVisibleCard();
      updateWidthBlockView();
      processEventCards();
      updateViews();
      $(".home-alphabetical-list-button").addClass("active-view-button");
      $(".home-chronicle-list-button").removeClass("active-view-button");
      $(".home-random-list-button").removeClass("active-view-button");
    });
  } else {
    console.log("NOT HOMEPAGE");
    $(".home-list-view").show();
    $(".chronicle-list-button, .list-view-button").addClass(
      "active-view-button"
    );
 
    // Initialization and Default Settings
    // Initially hide block view sorting buttons and set the default sorted view for list
    $(
      ".chronicle-block-button, .random-block-button, .alphabetical-block-button"
    ).hide();
    sortChronologically(); // Sort the block view chronologically by default
    updateLastVisibleCard();
    updateWidthBlockView();
    processEventCards();
    updateViews();
 
    $(".list-view-button").click(function () {
      console.log("List view button clicked.");
      $(".list-sorting-buttons").css("display", "flex");
      $(".block-sorting-buttons").hide();
      // Switching view classes
      $(".home-block-view")
        .removeClass("home-block-view")
        .addClass("home-list-view");
      // Additional class switch
      $(".home-chronicle-block")
        .removeClass("home-chronicle-block")
        .addClass("home-chronicle-list");
      // Toggling visibility of buttons
      $(
        ".chronicle-block-button, .random-block-button, .alphabetical-block-button"
      ).hide();
      $(
        ".chronicle-list-button, .random-list-button, .alphabetical-list-button"
      ).show();
      updateLastVisibleCard();
      updateWidthBlockView();
      processEventCards();
      updateViews();
 
      // Remove active class from block view button and add to list view button
      $(".block-view-button").removeClass("active-view-button");
      $(".list-view-button").addClass("active-view-button");
 
      // Conditional checks for transferring the active class from block to list buttons
      if ($(".chronicle-block-button").hasClass("active-view-button")) {
        $(".chronicle-block-button").removeClass("active-view-button");
        $(".chronicle-list-button").addClass("active-view-button");
      } else if ($(".random-block-button").hasClass("active-view-button")) {
        $(".random-block-button").removeClass("active-view-button");
        $(".random-list-button").addClass("active-view-button");
      } else if (
        $(".alphabetical-block-button").hasClass("active-view-button")
      ) {
        $(".alphabetical-block-button").removeClass("active-view-button");
        $(".alphabetical-list-button").addClass("active-view-button");
      }
    });
 
    $(".block-view-button").click(function () {
      console.log("Block view button clicked.");
      $(".list-sorting-buttons").hide(); // Hide list sorting buttons
      $(".block-sorting-buttons").css("display", "flex");
      $(".home-list-view")
        .removeClass("home-list-view")
        .addClass("home-block-view");
      $(".home-chronicle-list")
        .removeClass("home-chronicle-list")
        .addClass("home-chronicle-block");
      $(
        ".chronicle-block-button, .random-block-button, .alphabetical-block-button"
      ).show();
      $(
        ".chronicle-list-button, .random-list-button, .alphabetical-list-button"
      ).hide();
      updateLastVisibleCard();
      updateWidthBlockView();
      processEventCards();
      updateViews();
      $(".list-view-button").removeClass("active-view-button");
      $(".block-view-button").addClass("active-view-button");
 
      // Conditional checks for transferring the active class from block to list buttons
      if ($(".chronicle-list-button").hasClass("active-view-button")) {
        $(".chronicle-list-button").removeClass("active-view-button");
        $(".chronicle-block-button").addClass("active-view-button");
      } else if ($(".random-list-button").hasClass("active-view-button")) {
        $(".random-list-button").removeClass("active-view-button");
        $(".random-block-button").addClass("active-view-button");
      } else if (
        $(".alphabetical-list-button").hasClass("active-view-button")
      ) {
        $(".alphabetical-list-button").removeClass("active-view-button");
        $(".alphabetical-block-button").addClass("active-view-button");
      }
    });
 
    // BLOCK VIEW SORTING BUTTONS
    $(".chronicle-block-button").click(function () {
      sortChronologically();
 
      updateLastVisibleCard();
      updateWidthBlockView();
      processEventCards();
      updateViews();
      $(".chronicle-block-button").addClass("active-view-button");
      $(".random-block-button").removeClass("active-view-button");
      $(".alphabetical-block-button").removeClass("active-view-button");
    });
 
    $(".random-block-button").click(function () {
      randomizeCards(".list-container .card");
 
      updateLastVisibleCard();
      updateWidthBlockView();
      processEventCards();
      updateViews();
      $(".random-block-button").addClass("active-view-button");
      $(".chronicle-block-button").removeClass("active-view-button");
      $(".alphabetical-block-button").removeClass("active-view-button");
    });
 
    $(".alphabetical-block-button").click(function () {
      sortAlphabetically(".list-container .card");
 
      updateLastVisibleCard();
      updateWidthBlockView();
      processEventCards();
      updateViews();
      $(".alphabetical-block-button").addClass("active-view-button");
      $(".chronicle-block-button").removeClass("active-view-button");
      $(".random-block-button").removeClass("active-view-button");
    });
 
    // LIST VIEW SORTING BUTTONS
    $(".chronicle-list-button").click(function () {
      sortChronologically();
 
      updateLastVisibleCard();
      updateWidthBlockView();
      processEventCards();
      updateViews();
      $(".chronicle-list-button").addClass("active-view-button");
      $(".random-list-button").removeClass("active-view-button");
      $(".alphabetical-list-button").removeClass("active-view-button");
    });
 
    $(".random-list-button").click(function () {
      randomizeCards(".list-container .card");
 
      updateLastVisibleCard();
      updateWidthBlockView();
      processEventCards();
      updateViews();
      $(".random-list-button").addClass("active-view-button");
      $(".chronicle-list-button").removeClass("active-view-button");
      $(".alphabetical-list-button").removeClass("active-view-button");
    });
 
    $(".alphabetical-list-button").click(function () {
      sortAlphabetically(".list-container .card");
 
      updateLastVisibleCard();
      updateWidthBlockView();
      processEventCards();
      updateViews();
      $(".alphabetical-list-button").addClass("active-view-button");
      $(".chronicle-list-button").removeClass("active-view-button");
      $(".random-list-button").removeClass("active-view-button");
    });
  }
 
  // FILTERS  ---------------------  SECTION //
  // General Filters Toggle Button
  $(".general-toggle").click(function () {
    var filtersDiv = $("#filters");
    var resetButton = $(".reset-button");
 
    filtersDiv.toggleClass("is-visible");
 
    if (filtersDiv.hasClass("is-visible")) {
      filtersDiv.css("display", "grid").hide().slideDown(100);
      $(this).text("[FILTER]");
      // Attach click handler to document
      $(document).on("mousedown.hideFilters", function (event) {
        var isOutsideFilters =
          !filtersDiv.is(event.target) &&
          filtersDiv.has(event.target).length === 0;
        var isOnToggle = $(event.target).closest(".general-toggle").length > 0;
 
        if (isOutsideFilters && !isOnToggle) {
          filtersDiv.removeClass("is-visible").slideUp(100, function () {
            $(this).css("display", "none");
          });
          $(".general-toggle").text("[FILTER]");
          // Remove the document click handler
          $(document).off("mousedown.hideFilters");
        }
      });
    } else {
      filtersDiv.slideUp(100, function () {
        $(this).css("display", "none");
      });
      $(this).text("[FILTER]");
      // Remove the document click handler
      $(document).off("mousedown.hideFilters");
     }
     }
}


    updateLastVisibleCard();
#filters.is-visible {
     updateWidthBlockView();
     display:grid;
     processEventCards();
     opacity: 1;
     updateViews();
     height: auto; /* Adjust to the natural height of the content */
  });
}
 
.filter {
  // Specific Toggle for Filter Sections like TYPE, ENTITY, etc.
    white-space: normal;
  $(".open-filter").click(function (event) {
     overflow-wrap: break-word;
     event.stopPropagation();
}
 
.filter-label {
    var filterType = $(this).closest(".filter").data("filter");
    font-size: 17px;
     var cardSelector = $(".card").length > 0 ? ".card" : ".community-card"; // Determine which card type is present
     line-height: 22px;
 
     letter-spacing: 0.37px;
     console.log("Filter type:", filterType, "Card Selector:", cardSelector);
}


     $("#values-" + filterType).toggle();
.header-entry-number {
    font-size: 17px;
     line-height: 24px;
    letter-spacing: 0.37px;
    padding-bottom: 5px;
    float: left;
}
.header-authors {
    font-size: 19px;
    line-height: 26px;
    letter-spacing: 0.95px;
    padding-left: 5em;


     if ($("#values-" + filterType).is(":visible")) {
}
      $(this).addClass("active-filter");
.header-title {
     } else {
    border-top: 1px solid black;
      $(this).removeClass("active-filter");
    font-size: 19px;
     }
    line-height: 26px;
    letter-spacing: 0.95px;
    padding: 4px 0;
}
.header-authors a {
    color: black;
     text-decoration: none;
}
.header-authors a:hover {
    font-style: italic;
}
.header-title a {
    color: black;
    text-decoration: none;
}
.header-title a:hover {
    font-style: italic;
}
.header-type {
    border-top: 1px solid black;
    font-size: 19px;
    line-height: 23px;
    letter-spacing: 0.95px;
    padding-top: 4px;
}
.header-index {
    font-size: 17px;
    line-height: 22px;
    letter-spacing: 0.37px;
}
.header-index a {
    color: black;
}
.header-index a:hover {
    color: black;
}
.header-people {
    font-size: 17px;
    line-height: 22px;
    letter-spacing: 0.37px;
}
.header-people a{
    color: black!important;
}
.header-people a:hover{
    color: black;
}
.header-community {
    font-size: 17px;
    line-height: 22px;
    letter-spacing: 0.37px;
}
.header-community a {
    color: black!important;
}
.header-community a:hover{
    color: black;
}
.header-date {
    color: #4D4D4D;
    font-size: 17px;
    line-height: 22px;
    letter-spacing: 0.37px;
}
.header-about {
    font-size: 17px;
    line-height: 22px;
    letter-spacing: 0.37px;
}
.header-about a {
    color: black!important;
}
.header-about a:hover{
    color: black;
}
.about-hide {
    opacity: 0; /* Make it invisible initially */
    visibility: hidden; /* Ensure it's not interactable */
    display: none;
    color: black;
    font-size: 28px;
    line-height: 34px;
    letter-spacing: 1.4px;
    width: 200%;
    border-bottom: 1px solid black;
    padding-bottom: 5px;
    padding-top: 5px;
    transition: opacity 0.8s ease, visibility 0.8s;
}
.header-about:hover + .about-hide {
    display: block;
    opacity: 1; /* Make it fully visible on hover */
    visibility: visible; /* Make it interactable */
}
#about-container {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    padding-bottom: 12%;
    top: 420px;
    position: relative;
    width: 100%;
}
.about-col {
    width: calc(40% - 0px);
    box-sizing: border-box;
    height: fit-content;
    padding: 0 0 0 0;
    margin-bottom: 30px;
    margin-right: 15px;
}
.about-details-col {
    width: calc(18% - 0px);
     box-sizing: border-box;
    height: fit-content;
    margin-bottom: 30px;
    font-size: 10pt;
    line-height: 16px;
    letter-spacing: 0.4px;
    border-bottom: 1px solid black;
}
.about-details-label {
    border-top: 1px solid black;
    padding-top: 5px;
    margin-bottom: 0 !important;
    text-indent: 35px;
}
.about-details-text {
    margin: 3px 0 !important;
}
.about-main-text {
    text-indent: 35px;
    font-size: 23px;
    line-height: 31px;
    letter-spacing: 1.29px;
    margin-top: 0 !important;
}
.about-bullets {
    text-indent: 35px;
    padding-left: 35px;
}
.about-more-text {
    text-indent: 35px;
    font-size: 23px;
    line-height: 31px;
    letter-spacing: 1.29px;
    margin-top: 0 !important;
}
.about-label {
    font-size: 15px;
    line-height: 19px;
    letter-spacing: 0.48px;
    border-top: none!important;
    text-indent: 35px;
    margin-bottom: 0 !important;
}
.about-details-contact-label {
    font-size: 15px;
    line-height: 19px;
    letter-spacing: 0.48px;
    border-top: none!important;
    text-indent: 35px;
    margin-bottom: 0 !important;
}
.about-details-contact {
    font-size: 15px;
    line-height: 18px;
    text-indent: 35px;
    letter-spacing: 0.84px;
     margin-top: 0 !important;
}
/* -----END<------ STYLING HEADER */


    // Pass the determined card selector to the function
    updateLastVisibleCard(cardSelector);
    updateWidthBlockView(cardSelector);
    processEventCards(cardSelector);
    updateViews(cardSelector);


     console.log("Updated views and borders after filter toggle");
img {
  });
    border: 0;
    width: 50px;
     height: auto;
}


  function filterCards() {
.home-block-view {
     var displayCountsHtml = "";
     display: none;
     var cardSelector = $(".card").length > 0 ? ".card" : ".community-card"; // Determine which card type is present
     position: relative;
    top: 440px;
    width: -moz-available!important;
    width: -webkit-fill-available!important;
}
.home-list-view {
    display: none;
    position: relative;
    top: 440px;
}


    $(".filter .values a[title]").each(function () {
/* ----->START------ BUTTONS IN HOME LIST BLOCK CHRONICLE RANDOM ALPHABETICAL */
      var anchor = $(this);
      var filterValue = anchor.attr("title").toLowerCase();
      var count = 0;


      if (anchor.find("button").hasClass("active")) {
.active-view-button button {
        $(cardSelector).each(function () {
    text-decoration: underline;
          var card = $(this);
}
          $(".filter").each(function () {
            var filterType = $(this).data("filter");
            var cardValue = card
              .find("." + filterType)
              .text()
              .toLowerCase();
            if (cardValue.indexOf(filterValue) !== -1) {
              count++;
            }
          });
        });


        displayCountsHtml +=
/* Block and List View Buttons */
          "<span>[" + count + "] " + filterValue + "</span> ";
.view-container-buttons {
      }
    display: flex;
     });
    justify-content: space-between; /* This puts one group on the left, and the other on the right */
    position: relative;
    top: 420px;
}
.view-buttons, .order-buttons {
    display: flex;
    justify-content: left;
}
.home-view-buttons, .home-order-buttons {
    display: flex;
    justify-content: left;
    position: relative;
    z-index: 1000;
}
.view-buttons, .order-buttons {
    display: flex;
    justify-content: left;
    position: relative;
    z-index: 1000;
}
.home-list-sorting-buttons, .home-block-sorting-buttons {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
.list-sorting-buttons, .block-sorting-buttons {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
.home-list-sorting-buttons {
    display: none; /* Initially hide the sorting buttons */
}
.block-sorting-buttons {
    display: none; /* Initially hide the sorting buttons */
}
.list-view-button, .block-view-button, .chronicle-button, .random-button, .alphabetical-button, .chronicle-list-button, .random-list-button, .alphabetical-list-button, .chronicle-block-button, .random-block-button, .alphabetical-block-button, .home-list-view-button, .home-block-view-button, .home-chronicle-list-button, .home-random-list-button, .home-alphabetical-list-button, .home-chronicle-block-button, .home-random-block-button, .home-alphabetical-block-button {
    font-size: 19px;
    line-height: 26px;
    letter-spacing: 0.95px;
    padding-inline: 2px;
    display: inline-block;
}
.home-list-view-button button:hover, .home-block-view-button button:hover, .home-chronicle-block-button button:hover, .home-chronicle-list-button button:hover, .home-random-block-button button:hover, .home-random-list-button button:hover, .home-alphabetical-block-button button:hover, .home-alphabetical-list-button button:hover{
  text-decoration: underline;
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="4.5" fill="white" stroke="black" stroke-width="1" /></svg>') 14 14, auto;
}
.home-list-view-button button:focus, .home-block-view-button button:focus, .home-chronicle-block-button button:focus, .home-chronicle-list-button button:focus, .home-random-block-button button:focus, .home-random-list-button button:focus, .home-alphabetical-block-button button:focus, .home-alphabetical-list-button button:focus{
  text-decoration: underline;
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="4.5" fill="white" stroke="black" stroke-width="1" /></svg>') 14 14, auto;
}
.list-view-button button, .block-view-button button, .chronicle-button button, .random-button button, .alphabetical-button button, .chronicle-list-button button, .random-list-button button, .alphabetical-list-button button, .chronicle-block-button button, .random-block-button button, .alphabetical-block-button button, .home-list-view-button button, .home-block-view-button button, .home-chronicle-list-button button, .home-random-list-button button, .home-alphabetical-list-button button, .home-chronicle-block-button button, .home-random-block-button button, .home-alphabetical-block-button button{
    background: transparent;
    border: none;
     font-family: HALColant-TextRegular!important;
    font-size: 19px;
    line-height: 26px;
    letter-spacing: 0.4px;
    padding-inline: 5px;
}


    if (displayCountsHtml) {
/* -----END<------ BUTTONS IN HOME LIST BLOCK CHRONICLE RANDOM ALPHABETICAL */
      $(".count-filtered-cards").html(displayCountsHtml).show();
    } else {
      $(".count-filtered-cards").hide();
    }


    // Apply filtering and pass the determined card selector to the function
/* ----->START------ LIST AND BLOCK VIEW */
    applyFiltering(cardSelector);


     updateLastVisibleCard(cardSelector);
/* BLOCK VIEW */
    updateWidthBlockView(cardSelector);
.home-chronicle-block div.list-container {
     processEventCards(cardSelector);
     display: flex;
     updateViews(cardSelector);
    flex-wrap: wrap;
    margin: 0 auto;
    padding-left: 1px;
}
/* Card for BLOCK view */
.home-chronicle-block div.list-container div.card {
  position: relative;
  width: calc(20% - 0px);
  box-sizing: border-box;
  border: 1px solid black;
  height: fit-content;
  padding: 5px 10px;
  margin-bottom: 30px;
  font-size: 17px;
  line-height: 24px;
  letter-spacing: 0.9px;
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="24" font-family="Arial" fill="black">⤢</text></svg>') 16 16, auto;
}
.home-chronicle-block div.list-container div.card:hover {
     background: #f3f3f3;
}
.home-chronicle-list div.list-container div.card:hover {
     background: #f3f3f3;
}
.home-chronicle-block div.list-container div.event:hover {
  background: black;
  color: white !important;
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="4.5" fill="white" stroke="black" stroke-width="1" /></svg>') 14 14, auto;
}


    console.log("Filtering process complete, updated views and borders");
.home-chronicle-block div.list-container div.event:hover .entry-number,
  }
.home-chronicle-block div.list-container div.event:hover .event-link,
.home-chronicle-block div.list-container div.event:hover .title,
.home-chronicle-block div.list-container div.event:hover .container-people-date .people a,
.home-chronicle-block div.list-container div.event:hover .container-people-date .date,
.home-chronicle-block div.list-container div.event:hover .type a {
  color: white !important;
}


   function applyFiltering() {
.home-chronicle-list div.list-container div.event:hover {
    // Determine which card selector to use based on the elements present in the DOM
  background: black;
    var cardSelector = $(".card").length > 0 ? ".card" : ".community-card";
  color: white !important;
   cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="4.5" fill="white" stroke="black" stroke-width="1" /></svg>') 14 14, auto;
}


    // Apply the logic to the determined card type
.home-chronicle-list div.list-container div.event:hover .entry-number,
    $(cardSelector)
.home-chronicle-list div.list-container div.event:hover .event-link,
      .show()
.home-chronicle-list div.list-container div.event:hover .title,
      .each(function () {
.home-chronicle-list div.list-container div.event:hover .container-people-date .people a,
        var card = $(this);
.home-chronicle-list div.list-container div.event:hover .container-people-date .date,
        var hideCard = false;
.home-chronicle-list div.list-container div.event:hover .type a {
  color: white !important;
}


        $(".filter").each(function () {
.home-chronicle-block div.list-container div.event div.entry-number {
          if (hideCard) return;
    z-index: 100000;
}
.home-chronicle-block div.list-container div.event div.entry-number:hover {
    color: white;
}
.home-chronicle-block div.list-container div.card:not(:first-child) {
    margin-left: -1px;
    border-left: 1px solid black;
}
.home-chronicle-block div.list-container div.card:nth-child(5n + 1) {
    transform: none;
    width: calc(20% - 0px);
}
.home-chronicle-block div.list-container div.card:last-child {
    margin-right: 0;
    border-right: 1px solid black;
}


          var filterType = $(this).data("filter");
/* Contents of Card for BLOCK view */
          var activeFilters = $(this)
.home-chronicle-block div.list-container div.card div.images {
            .find(".values a[title] button.active")
    border-top: 1px solid black;
            .map(function () {
    padding-top: 5px;
              return $(this).parent("a").attr("title").toLowerCase();
    padding-bottom: 5px;
            })
    display: flex;  
            .get();
    flex-wrap: nowrap;
}
.home-chronicle-block div.list-container div.card div.image1,  .home-chronicle-block div.list-container div.card div.image2 {
    margin-right: 10px;
    transition: transform 0.3s ease;
    transform-origin: top left;
}
.home-chronicle-block div.list-container div.card div.image1 img,  .home-chronicle-block div.list-container div.card div.image2 img{
    display: block;
    width: auto;
    height: 75px;


          if (activeFilters.length > 0) {
}
            var cardValue = card
              .find("." + filterType)
              .text()
              .toLowerCase();
            var matchesFilter = activeFilters.some(function (filterValue) {
              return cardValue.indexOf(filterValue) !== -1;
            });
            if (!matchesFilter) hideCard = true;
          }
        });
 
        if (hideCard) card.hide();
      });
  }


  function updateLastVisibleCard() {
.home-chronicle-block div.list-container div.card div.image1:hover,
    // Target only the list view container for updating the last visible card
.home-chronicle-block div.list-container div.card div.image2:hover {
    $(".home-chronicle-list div.list-container div.card").removeClass(
    transform: scale(2);
      "last-visible"
    position: relative;
     );
     z-index: 900000;
}


    // Find the last visible card within the list view and add the class
.home-chronicle-block div.list-container div.card div.image3, .home-chronicle-block div.list-container div.card div.image4, .home-chronicle-block div.list-container div.card div.image5 {
     var lastVisibleCard = $(
     display: none;
      ".home-chronicle-list div.list-container div.card:visible:last"
}
     );
.home-chronicle-block div.list-container div.card div.image3 img, .home-chronicle-block div.list-container div.card div.image4 img, .home-chronicle-block div.list-container div.card div.image5 img {
    lastVisibleCard.addClass("last-visible");
     display: none;
  }
}


  function updateWidthBlockView() {
.home-chronicle-block div.list-container div.card div.entry-number {
    // Target only the block view container for updating the with of card
  padding-bottom: 3px;
    $(".home-chronicle-block div.list-container").css("width", "100%");
  float: left;
    $(".home-chronicle-block div.list-container div.card").css(
}
      "width",
.title a {
      "calc(20% - 0px)"
  color: black !important;
    );
  pointer-events: none;
    $(
  cursor: default;
      ".home-chronicle-block div.list-container div.card:nth-child(5n + 1)"
}
    ).css("width", "calc(20% + 4px)");
  }


  // Reset function to remove active filters
.home-chronicle-block div.list-container div.card div.event-link {
  $(".reset-filter").click(function (event) {
     text-decoration: underline;
     event.stopPropagation(); // Prevent event bubbling
    font-size: 16px;
    line-height: 26px;
    float: right;
    margin-top: -2px;
    font-family: Arial, sans-serif;
    text-underline-offset: 3px;
}


     // Remove 'active' class from all filter buttons
.home-chronicle-block div.list-container div.card.event .title {
     $("#filters .values button").removeClass("active");
  font-size: 23px;
     $(".open-filter").removeClass("active-filter");
  line-height: 26px;
  font-style: italic;
  text-align: left;
  letter-spacing: 0.9px;
  padding: 6px 6px 6px 0;
  border-top: 1px solid black
}
.home-chronicle-list div.list-container div.card.event div.title {
  font-size: 17px;
  line-height: 24px;
  letter-spacing: 0.9px;
  text-align: left;
  width: calc(60% - 0px);
  max-width: 40%;
}
.home-chronicle-list div.list-container div.card.event .container-people-date {
  display: flex;
  width: calc(20% - 0px);
  padding-right: 50px;
}
.home-chronicle-list div.list-container div.card.event div.people {
  width: auto;
  flex: 1;
}
.home-chronicle-list div.list-container div.card.event div.date {
     width: auto;
    flex: 1;
    text-align: center;
     width: calc(10% - 0px);
    white-space: nowrap;
    position: absolute;
    left: 80%;
}
.home-chronicle-list div.list-container div.card.event div.date:hover {
    color: #fff !important;
}
.home-chronicle-block div.list-container div.event:hover .date,
.home-chronicle-list div.list-container div.event:hover .date {
  color: #fff !important;
}
.home-chronicle-block div.list-container div.card.event div.container-people-date {
    display: flex; /* Enables flexbox layout mode */
    justify-content: space-between;
     border-top: 1px solid black;
}
.home-chronicle-block div.list-container div.card.event div.people {
    padding-left: 0!important;
}


    // Reset and hide the filter counts
.home-chronicle-block div.list-container div.card div.container-people-date .people {
    $(".count-filtered-cards").text("").hide();
  flex: 1;
  text-align: left;
  border: none!important;
  line-height: 23px !important;
  padding-top: 6px;
}
.home-chronicle-block div.list-container div.card div.container-people-date .date {
  flex: 1;
  text-align: right;
  line-height: 23px !important;
  padding-top: 6px;
}


     filterCards(); // Reapply filtering based on the updated active buttons
.home-chronicle-block div.list-container div.card div.people {
  line-height: 23px!important;
  padding-top: 2px;
  padding-left: 5em;
}
.home-chronicle-block div.list-container div.card div.people a {
    color: black;
    text-decoration: underline;
}
.home-chronicle-block div.list-container div.card div.people a:hover {
    font-style: italic;
     color: black;
}


    // Update other UI elements as needed, excluding the general toggle button
.home-chronicle-block div.list-container div.card div.title {
    updateLastVisibleCard();
  font-size: 23px;
    updateWidthBlockView();
  padding: 6px 0;
    processEventCards();
  border-top: 1px solid black;
    updateViews();
}
  });


   $("#filters .values button").click(function () {
.home-chronicle-block div.list-container div.card div.type {
     console.log("Filter is clicked!!!");
    border-top: 1px solid black;
     $(this).toggleClass("active");
    padding-top: 5px;
     filterCards(); // Re-apply the filters based on the updated active buttons
}
.home-chronicle-block div.list-container div.card div.type a {
    color: black;
    text-decoration: none;
}
.home-chronicle-block div.list-container div.card div.type a:hover {
    font-style: italic;
    color: black;
}
.home-chronicle-block div.list-container div.card.event div.type a:hover {
   
}
/* Card for LIST view */
.home-chronicle-list div.list-container {
    width: 100%; /* For Chrome and other browsers */
    padding-bottom: 80px;
}
.home-chronicle-list div.list-container div.card {
  width: -moz-available!important;
  width: -webkit-fill-available!important;
  width: 100%;
  margin-bottom: 0;
  border-left: 1px solid black;
  border-right: 1px solid black;
   border-bottom: none;
  border-top: 1px solid black;
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="24" font-family="Arial" fill="black">⤢</text></svg>') 16 16, auto;
  display: flex;
  align-items: flex-start;
  justify-content: start;
  font-size: 17px;
  line-height: 24px;
  letter-spacing: 0.9px;
  transition-delay: .001s;
  padding: 5px 10px;
}
.home-chronicle-list div.list-container div.card:not(:first-child) {
     margin-left: 0;
    border-left: 1px solid black;
}
.home-chronicle-list div.list-container div.card:nth-child(5n + 1) {
    margin-left: 0;
     transform: none;
}
/*
.home-chronicle-list div.list-container div.card:last-child {
    margin-right: 0;
     border-bottom: 1px solid black;
} */
.home-chronicle-list div.list-container div.card.last-visible {
    margin-right: 0;
    border-bottom: 1px solid black;
}


     updateLastVisibleCard();
/* Contents of Card for LIST view */
     updateWidthBlockView();
.home-chronicle-list div.list-container div.card div.entry-number {
     processEventCards();
     width: calc(10% - 0px);
     updateViews();
}
  });
.home-chronicle-list div.list-container div.event div.entry-number {
     width: calc(3.5% + 5px);
}
.home-chronicle-list div.list-container div.event div.event-link {
     width: calc(6.2% - 0px);
     text-decoration: underline;
    font-size: 16px;
    line-height: 24px;
    float: right;
    margin-top: -3.4px;
    font-family: Arial, sans-serif;
    text-underline-offset: 3px;
}
.home-chronicle-list div.list-container div.card div.people {
    width: calc(20% - 0px);
    border: none;
    padding-right: 50px;
}
.home-chronicle-list div.list-container div.card div.people a {
    text-decoration: underline;
    color: black;
}
.home-chronicle-list div.list-container div.card.event div.people a {
 
}
.home-chronicle-list div.list-container div.card div.people a:hover {
    font-style: italic;
}
.home-chronicle-list div.list-container div.card div.title-images {
    display: flex;
    width: calc(60% - 0px);
    max-width: 50%;
}
.home-chronicle-list div.list-container div.card div.images {
    display: flex;
    border: none;
    padding-top: 0;
    padding-bottom: 0;
}


  // Hide filters when window is scrolled
.home-chronicle-list div.list-container div.card div.image1 img,  .home-chronicle-list div.list-container div.card div.image2 img{
  $(window).on("scroll", function () {
    display: block;
     var filtersDiv = $("#filters");
    max-width: 100%;
    width: auto;
    height: 25px;
}
.home-chronicle-list div.list-container div.card div.image1, .home-chronicle-list div.list-container div.card div.image2  {
    margin-right: 10px;
    transition: transform 0.3s ease;
    transform-origin: top left;
}
.home-chronicle-list div.list-container div.card div.image3, .home-chronicle-list div.list-container div.card div.image4, .home-chronicle-list div.list-container div.card div.image5 {
    display: none;
}
.home-chronicle-list div.list-container div.card div.type {
    width: calc(10% - 0px);
    border: none;
    white-space: nowrap;
    position: absolute;
    left: 90%;
}
.home-chronicle-list div.list-container div.card.event div.type a {
   
}
.home-chronicle-list div.list-container div.card div.type a {
    color: black;
    text-decoration: none;
}
.home-chronicle-list div.list-container div.card div.type a:hover {
    font-style: italic;
}
.home-chronicle-list div.list-container div.card div.title {
    max-width: 50%;
}
.home-chronicle-list div.list-container div.card div.image1:hover,
.home-chronicle-list div.list-container div.card div.image2:hover {
     transform: scale(6);  
}


    if (filtersDiv.hasClass("is-visible")) {
.card.event + .card.event {
      filtersDiv.removeClass("is-visible").slideUp(100, function () {
    border-left: none;
        $(this).css("display", "none");
}
        // The filter reset code has been removed to keep the filters active
/* -----END<------ LIST AND BLOCK VIEW */
      });
      $(".general-toggle").text("[FILTER]"); // Update the toggle button text
    }
  });


  // MODAL ARTICLE ---------------------   SECTION //
/* ----->START------ POP UP ARTICLE */
  // Format paragraphs
#list {
  function formatParagraphs(text) {
    width: 100%!important;
     var paragraphs = text.split("\n").filter(function (p) {
}
      return p.trim() !== "";
#show-article-wrapper-entry {
     });
    display: block;
     return paragraphs
    position: fixed; /* Change to fixed */
      .map(function (p) {
    top: 0;
         return "<p>" + p.trim() + "</p>";
    /*right: 24px;*/
      })
    right: 1.3%;
      .join("");
    width: 41%;
  }
    height: 100vh; /* Set to full viewport height */
    overflow: auto; /* Enables scrolling if content overflows */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
    z-index: 9999; /* Ensure it's above #list */
    /*padding-left: 100px;*/
    margin-top: 50px;
}
#show-article-wrapper-entry #show-article {
    padding-bottom: 50px;
}
/* Hides scrollbar for Webkit browsers */
#show-article-wrapper-entry::-webkit-scrollbar {
    display: none;
}
#show-article-wrapper {
    display: none;
    position: fixed; /* Change to fixed */
    top: 5%;
    /*right: 24px;*/
    right: 1.3%;
    width: 41%;
    height: 100vh; /* Set to full viewport height */
    overflow: auto; /* Enables scrolling if content overflows */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    z-index: 9999; /* Ensure it's above #list */
    /*padding-left: 100px;*/
}
/* Hides scrollbar for Webkit browsers */
#show-article-wrapper::-webkit-scrollbar {
     display: none;
}
#show-article {
    background-color: #FAFAFA;
    border: 1px solid;
    padding: 0px 10px 0 10px;
    position: relative;
    top: 40px;
    /*margin-left: 36px;*/
    margin-left: 4.6%;
}
#show-article-before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #FAFAFA;
    border: 1px solid #080808;
    transition: all 0.3s ease;
     opacity: 0; /* Initially hidden */
     z-index: -1; /* Ensures it's under the main content */
}
#show-article:hover #show-article-before {
    opacity: 1;
         scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
/* Hides scrollbar for Webkit browsers */
#show-article::-webkit-scrollbar {
    display: none;
}


  var images = []; // Initialize an empty array to store the images
.article-metadata {
  // Find all image containers within the article content and extract the necessary information
    display: flex;
  $(".article-images .image-container").each(function () {
    border-bottom: 1px solid black;
     var img = $(this).find("img");
    padding: 5px 0 5px 0;
     var captionDiv = $(this).find('div[class^="caption-image"]');
}
     var image = {
.article-metadata-label {
      src: img.attr("src"),
     text-transform: uppercase;
      alt: img.attr("alt"),
    margin-bottom: 0 !important;
      caption: captionDiv.text(),
     margin-top: 5px!important;
      captionClass: captionDiv.attr("class"),
     font-size: 15px;
     };
    line-height: 23px;
     images.push(image); // Add the image object to the images array
    letter-spacing: 0.48px;
  });
}
.article-metadata-value {
    text-transform: capitalize;
    font-size: 19px;
    line-height: 23px;
    letter-spacing: 0.6px;
     margin-top: 0 !important;
     margin-bottom: 7px !important;
}
.article-metadata-value a {
  color: black !important;
}


  if (images.length > 0) {
.article-metadata-column:not(:first-child) {
     setupImageToggle(images); // Call the setupImageToggle function with the images array
     margin-left: 20px;
    updateImageLabel(1, images.length); // Set the label for the first image immediately
}
  }


  function setupImageToggle(images) {
.article-metadata-column:nth-child(n+2) {
     var currentIndex = 0;
     margin-left: 10%;
     var enableNavigation = images.length > 1; // Enable navigation only if there is more than one image
}
.article-label-description {
    text-transform: uppercase;
    text-indent: 35px;
    padding-top: 5px;
    font-size: 15px;
    line-height: 23px;
    letter-spacing: 0.48px;
}
.article-label-image {
    text-transform: uppercase;
    text-indent: 35px;
    font-size: 15px;
    line-height: 23px;
    letter-spacing: 0.48px;
    padding-top: 5px;
}
.article-label-reflection {
    text-transform: uppercase;
    text-indent: 35px;
    padding-top: 5px;
    font-size: 15px;
    line-height: 23px;
    letter-spacing: 0.48px;
}
.article-label-quote {
    text-transform: uppercase;
    text-indent: 35px;
    font-size: 15px;
    line-height: 23px;
    letter-spacing: 0.48px;
    padding-top: 5px;
}
.article-label-modification-date {
    text-transform: uppercase;
    padding-top: 5px;
    text-indent: 35px;
    color: grey;
    display: inline-block;
    font-size: 15px;
    line-height: 23px;
    letter-spacing: 0.48px;
}
.article-entry-number {
    border-bottom: 1px solid black;
    font-size: 19px;
    line-height: 23px;
    letter-spacing: 0px;
    padding-bottom: 5px;
    padding-top: 7px;
}
.article-people {
    font-size: 25px;
    line-height: 30px;
    letter-spacing: 1.4px;
    text-decoration: underline;
    text-align: center;
    padding-top: 25px;
    margin-bottom: 5px!important;
}
.article-people a {
    color: black;
    text-decoration: underline;
}
.article-people a:hover {
    font-style: italic;
    color: black;
}
.article-title-link {
    border-bottom: 1px solid black;
    padding-bottom: 10px;
    display: flex; /* Use flexbox */
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Align items horizontally in the center */
    justify-content: center; /* Align items vertically in the center */
    text-align: center; /* Center the text */
}
.article-title {
    font-size: 25px;
    line-height: 30px;
    letter-spacing: 1.4px;
    text-align: center;
    margin-bottom: 0!important;
    margin-top: 0 !important;
    max-width: 70%;
}
.article-title a{
    color: black!important;
    font-size: 25px;
    line-height: 30px;
    letter-spacing: 1.4px;
    text-align: center;
    margin-bottom: 0!important;
    margin-top: 0 !important;
    max-width: 70%;
}
.article-type {
    font-size: 19px;
    line-height: 23px;
    letter-spacing: 0.4px;
    border-bottom: 1px solid black;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 5px 0 5px 0;
}
.article-type a {
    color: black;
    text-decoration: none;
}
.article-type a:hover {
    font-style: italic;
    color: black;
}
.article-entity {
    font-size: 12pt;
    line-height: 25px;
    letter-spacing: 0.4px;
    margin-top: 0 !important;
}
.article-discipline {
    font-size: 12pt;
    line-height: 25px;
    letter-spacing: 0.4px;
     margin-top: 0 !important;
}
.article-subject {
    font-size: 12pt;
    line-height: 25px;
    letter-spacing: 0.4px;
    margin-top: 0 !important;
}
.article-images {
    border-bottom: 1px solid black;
    padding-bottom: 7px;
}
.article-image {
    position: relative;
}
.external-link-icon {
    display: flex; /* Use flexbox */
    align-items: center; /* Align items vertically in the center */
    justify-content: center; /* Center the content horizontally */
    width: 20px; /* Adjust the width as needed */
    height: 20px; /* Adjust the height as needed */
    font-size: 17px;
    line-height: 22px;
    letter-spacing: 0.48px;
    color: black !important;
    text-decoration: none;
}
.external-link-icon a {
    font-size: 17px;
    line-height: 22px;
    letter-spacing: 0.48px;
    color: black !important;
    text-decoration: none;
}
.external-link-icon a:hover {
    text-decoration: underline;
}
p.pdf-link-icon {
  margin-right: 10px;
}
.text-symbol {
    color: black; /* Ensure the symbol is black */
    font-size: 15px;
}


    function showImage(index) {
.pdf-link-icon {
      currentIndex = index;
  font-size: 17px;
      var image = images[currentIndex];
  line-height: 22px;
      updateImageLabel(currentIndex + 1, images.length);
  letter-spacing: 0.48px;
      $("#article-content")
  color: black !important;
        .find(".article-images")
  margin-right: 25px;
        .html(
  margin-left: -20px;
          getImageHtml(image, currentIndex, images.length, enableNavigation)
}
        );
.pdf-link-icon a {
     }
  font-size: 17px;
  line-height: 22px;
  letter-spacing: 0.48px;
  color: black !important;
}
.link-pdf {
    display: flex;
     margin-top: 5px;
    align-items: center;
}


     // Attach click handlers only if navigation is enabled
.image-container {
     if (enableNavigation) {
     position: relative;
      $("#article-content").on("click", ".next-arrow", function () {
     display: inline-block;
        showImage((currentIndex + 1) % images.length);
}
      });


      $("#article-content").on("click", ".prev-arrow", function () {
.image-container img {
        showImage((currentIndex - 1 + images.length) % images.length);
    display: block;
      });
    max-width: 100%;  
     }
    width: auto;
    height: 400px;  
     padding-bottom: 3px;
}


     // Display the first image
.arrows-and-image {
     showImage(currentIndex);
     position: relative;
  }
     width: fit-content;
}


  function getImageHtml(image, currentIndex, totalImages, enableNavigation) {
.image-navigation {
     var imageLabel = currentIndex + 1 + "/" + totalImages + " IMAGES";
    position: relative;
    display: inline-block;
}
.image-navigation:hover .prev-arrow,
.image-navigation:hover .next-arrow {
     display: block;
}


    // Render navigation arrows based on the enableNavigation flag
    var navigationHtml = enableNavigation
      ? '<div class="prev-arrow"><</div><div class="next-arrow">></div>'
      : "";


    return (
.image-navigation:hover .caption-image1,
      '<div class="image-navigation">' +
.image-navigation:hover .caption-image2,
      '<p class="article-label-image">' +
.image-navigation:hover .caption-image3,
      imageLabel +
.image-navigation:hover .caption-image4,
      "</p>" +
.image-navigation:hover .caption-image5,
      '<div class="image-container">' +
.image-navigation:hover .related-article-caption-image1,
      '<div class="arrows-and-image">' +
.image-navigation:hover .related-article-caption-image2,
      navigationHtml +
.image-navigation:hover .related-article-caption-image3,
      '<img src="' +
.image-navigation:hover .related-article-caption-image4,
      image.src +
.image-navigation:hover .related-article-caption-image5 {
      '" alt="' +
     display: block;
      image.alt +
}
      '">' +
      "</div>" +
      '<div class="' +
      image.captionClass +
      '">' +
      image.caption +
      "</div>" +
      "</div>" +
      "</div>"
     );
  }


  function updateImageLabel(currentIndex, totalImages) {
.prev-arrow, .next-arrow {
     var imageLabel = currentIndex + "/" + totalImages + " IMAGES";
    position: absolute;
     $("#article-content .article-label-image").text(imageLabel);
    top: 53%;
  }
    transform: translateY(-53%);
     cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="4.5" fill="white" stroke="black" stroke-width="1" /></svg>') 14 14, auto;
     user-select: none;
    font-size: 40px;
    color: white; /* Adjust color as needed */
    display: none; /* Hide arrows initially */
    z-index: 10;
}


  $(".caption-image1").each(function () {
.prev-arrow {
    // Split the caption at each <br> tag and wrap each line in a span
     left: 10px;
    var htmlContent = $(this).html();
}
    var lines = htmlContent.split("<br>");
    var wrappedLines = lines.map(function (line) {
      return '<span class="caption-line">' + line + "</span>";
    });
     var newHtml = wrappedLines.join("<br>");
    $(this).html(newHtml);
  });


   function setShowArticleRotationEffect() {
.next-arrow {
     const offset = 20;
    right: 10px;
     const showArticle = document.querySelector("#show-article");
}
     const h = showArticle.clientHeight;
.caption-line {
     const theta = -Math.atan(offset / h);
   display: contents;
     const a = Math.cos(theta);
  font-size: 15px;
     const b = Math.sin(theta);
  line-height: 18px;
     const c = -Math.sin(theta);
  letter-spacing: .48px;
     const d = Math.cos(theta);
}
     const showArticleBefore = document.querySelector("#show-article-before");
.caption-image1, .caption-image2, .caption-image3, .caption-image4, .caption-image5, .related-article-caption-image1, .related-article-caption-image2, .related-article-caption-image3, .related-article-caption-image4, .related-article-caption-image5 {
     const transformValue =
     display: none;
      "matrix(" + a + "," + b + "," + c + "," + d + ",0,0)";
    caption-side: bottom;
     showArticleBefore.style.transform = transformValue;
    font-size: 15px;
   }
    line-height: 18px;
    letter-spacing: 0.48px;
   
}
.article-book {
    text-transform: capitalize;
    font-size: 19px;
     line-height: 23px;
    letter-spacing: 0.6px;
    margin-top: 0 !important;
    margin-bottom: 7px !important;
}
.article-web {
    text-transform: capitalize;
     font-size: 19px;
    line-height: 23px;
    letter-spacing: 0.6px;
    margin-top: 0 !important;
    margin-bottom: 7px !important;
     border-bottom: 1px solid black;
}
.article-year {
    text-transform: capitalize;
     font-size: 19px;
    line-height: 23px;
    letter-spacing: 0.6px;
    margin-top: 0 !important;
     margin-bottom: 7px !important;
    border-bottom: 1px solid black;
}
.article-has-url {
    text-transform: capitalize;
     font-size: 19px;
    line-height: 23px;
    letter-spacing: 0.6px;
     margin-top: 0 !important;
    margin-bottom: 7px !important;
    border-bottom: 1px solid black;
}
.article-has-pdf {
    text-transform: capitalize;
     font-size: 19px;
    line-height: 23px;
    letter-spacing: 0.6px;
    margin-top: 0 !important;
    margin-bottom: 7px !important;
    border-bottom: 1px solid black;
}
.article-internal-ref {
    text-transform: capitalize;
    font-size: 19px;
    line-height: 23px;
     letter-spacing: 0.6px;
    margin-top: 0 !important;
    margin-bottom: 7px !important;
    border-bottom: 1px solid black;
}
.article-external-ref {
    font-size: 19px;
    line-height: 23px;
    letter-spacing: 0.6px;
    margin-top: 0 !important;
    margin-bottom: 7px !important;
     border-bottom: 1px solid black;
}
.article-external-reference {
    font-size: 19px;
    line-height: 23px;
    letter-spacing: 0.6px;
    margin-top: 0 !important;
    margin-bottom: 7px !important;
    border-bottom: 1px solid black;
    text-indent: 35px;
    padding-bottom: 5px;
}
.article-label-external-reference {
  text-transform: uppercase;
   text-indent: 35px;
  padding-top: 5px;
  font-size: 15px;
  line-height: 23px;
  letter-spacing: 0.48px;
}
.article-external-ref a {
  padding-right: 0px !important;
  color: black !important;
}
.article-external-reference a {
    padding-right: 0px !important;
    color: black !important;
}
.article-format-participation {
    text-transform: capitalize;
    font-size: 19px;
    line-height: 23px;
    letter-spacing: 0.6px;
    margin-top: 0 !important;
    margin-bottom: 7px !important;
    border-bottom: 1px solid black;
}
.article-setting {
    text-transform: capitalize;
    font-size: 19px;
    line-height: 23px;
    letter-spacing: 0.6px;
    margin-top: 0 !important;
    margin-bottom: 7px !important;
    border-bottom: 1px solid black;
}
.article-notes {
    font-size: 23px;
    line-height: 31px;
    letter-spacing: 1.29px;
    text-align: left;
    text-indent: 35px;
    border-bottom: 1px solid black;
}
.image-container:hover .caption-image1,
.image-container:hover .caption-image2,
.image-container:hover .caption-image3,
.image-container:hover .caption-image4,
.image-container:hover .caption-image5 {
    display: block;
}


  function openEvent(element, event) {
.image-container:hover .related-article-caption-image1,
     event.stopPropagation();
.image-container:hover .related-article-caption-image2,
    event.preventDefault();
.image-container:hover .related-article-caption-image3,
.image-container:hover .related-article-caption-image4,
.image-container:hover .related-article-caption-image5 {
     display: block;
}


     var url = $(element).find(".link a").attr("href");
.article-description {
     if (url) {
    font-size: 23px;
      window.open(url, "_blank").focus();
     line-height: 31px;
     }
    letter-spacing: 1.29px;
  }
    text-align: left;
    text-indent: 35px;
    border-bottom: 1px solid black;
}
.article-reflection {
    font-size: 23px;
    line-height: 31px;
    letter-spacing: 1.29px;
     text-align: left;
    text-indent: 35px;
    margin-top: 0 !important;
    border-bottom: 1px solid black;
    padding-bottom: 5px;
}
.article-quote {
    font-size: 30px;
    line-height: 31px;
    letter-spacing: 1.5px;
    font-style: italic;
    text-align: left;
    text-indent: 35px;
    margin-top: 0 !important;
    border-bottom: 1px solid black;
     padding-bottom: 5px;
}


  function openModal(cardElement, event) {
.article-modification-date {
     event.stopPropagation();
     color: grey;
     $("#print-chooser").hide();
    text-align: left;
     $("#show-article").removeClass("print-opts-open");
    text-indent: 10px;
     var pageTitle = $(cardElement).data("page") || null; // e.g. "090"
     margin-top: 0 !important;
     window.currentEntryTitle = pageTitle;
     display: inline-block;
    padding-bottom: 5px;
    font-size: 15px;
     line-height: 23px;
     letter-spacing: 0.48px;
}


     var isRelatedArticle = $(cardElement).hasClass("related-article");
#related-articles {
     showArticleWrapper.css("display", "block");
    margin-top: 0px;
    /*margin-left: 36px;*/
    margin-left: 4.6%;
    padding-bottom: 80px;
    padding-top: 100px;
}
.related-articles-label {
    text-transform: uppercase;
    margin-bottom: 0 !important;
    text-indent: 35px;
}
.related-articles-container {
     display: flex;
    flex-wrap: wrap;
    gap: 0; /* No gap between articles */
}
.related-article {
    width: calc(50% - 0px); /* Adjusted width */
    box-sizing: border-box;
    border: 1px solid black;
    height: fit-content;
     padding: 3px 10px 6px 10px;
    margin-bottom: 30px;
    font-size: 19px;
    line-height: 26px;
    letter-spacing: 0.95px;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="4.5" fill="white" stroke="black" stroke-width="1" /></svg>') 14 14, auto;
    background-color: #FAFAFA;
}


    // Clear existing content in modal
.related-article:not(:first-child) {
    $("#article-title").empty();
     margin-left: -1px;
     $("#article-content").empty();
}


    if (isRelatedArticle) {
.related-article:nth-child(2n + 1) {
      // Handle card elements (existing logic)
    margin-left: 0;
      var cardImages = [];
}
      for (var i = 1; i <= 5; i++) {
        var imageClass = ".related-article-image" + i;
        var captionClass = ".related-article-caption-image" + i;
        var imageElem = $(cardElement).find(imageClass + " img");


        if (imageElem.length) {
.related-article:last-child {
          var captionText = $(cardElement)
    margin-right: 0;
            .find(imageClass + " " + captionClass)
}
            .text();
.related-article-entry-number {
          cardImages.push({
    padding-bottom: 3px;
            link: $(cardElement)
}
              .find(imageClass + " a")
.related-article-people {
              .attr("href"),
    text-decoration: underline;
            src: imageElem.attr("src"),
    border-top: 1px solid black;
            alt: imageElem.attr("alt"),
    line-height: 23px!important;
            caption: captionText,
    padding-top: 6px;
            captionClass: "related-article-caption-image" + i,
}
          });
.related-article-people a {
        }
    color: black;
      }
    text-decoration: underline;
}
.related-article a:hover {
    font-style: italic;
    color: black;
}
.related-article-title {
   
}
.related-article-type {
    border-top: 1px solid black;
}


      if (cardImages.length > 1) {
.related-article-type a {
        setupImageToggle(cardImages);
    color: black;
      }
    text-decoration: none;
      // Handle related-article elements
}
      var entryNumber = $(cardElement)
.related-article-type a:hover {
        .find(".related-article-entry-number")
    font-style: italic;
        .text();
    color: black;
      var peopleHtml = $(cardElement).find(".related-article-people").html();
}
      var title = $(cardElement).find(".related-article-title").text();
      var typeHtml = $(cardElement).find(".related-article-type").html();
      var externalPdfURL = $(cardElement)
        .find(".related-article-pdf a")
        .attr("href");
      var externalLinkURL = $(cardElement)
        .find(".related-article-link a")
        .attr("href");
      var entity = $(cardElement).find(".related-article-entity").text();
      var discipline = $(cardElement)
        .find(".related-article-discipline")
        .text();
      var subjectHtml = $(cardElement).find(".related-article-subject").html();
      var description = $(cardElement)
        .find(".related-article-description")
        .html();
      var reflection = $(cardElement)
        .find(".related-article-reflection")
        .html();
      var quote = $(cardElement).find(".related-article-quote").text();
      var modificationDate = $(cardElement)
        .find(".related-article-modification-date")
        .text();


      // Update modal content for related-article
#close-button {
      $("#article-title").html(
    float: right;
        '<p class="article-entry-number">' +
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="4.5" fill="white" stroke="black" stroke-width="1" /></svg>') 14 14, auto;
          entryNumber +
    font-size: 20px;
          '</p><p class="article-people">' +
    line-height: 24px;
          peopleHtml +
    letter-spacing: 0px;
          "</p>"
      );
      var articleContentHtml = '<div class="article-title-link">';
      articleContentHtml += '<p class="article-title">' + title + "</p>";
      // Create a div that will wrap the links
      articleContentHtml += '<div class="link-pdf">';


      if (externalPdfURL) {
    position: absolute;  /* override float for precise placement */
        articleContentHtml +=
    top: 8px;
          '<a href="' +
    right: 8px;
          externalPdfURL +
}
          '" target="_blank" class="pdf-link-icon">[PDF<span class="text-symbol">⤴</span>]</a>';
      }
      if (externalLinkURL) {
        articleContentHtml +=
          '<a href="' +
          externalLinkURL +
          '" target="_blank" class="external-link-icon">[WEB<span class="text-symbol">⤴</span>]</a>';
      }


      // Close the .link-pdf div
/* print button next to [close] */
      articleContentHtml += "</div>";
#print-button {
      articleContentHtml += "</div>"; // Close the container div
  position: absolute;
  top: 8px;
  right: 60px;         
  line-height: 24px;
  font-size: 20px;
  letter-spacing: 0;
  cursor: pointer;
  z-index: 10;
  padding-right: 8px;
}


      // Append type, entity, discipline, and subject details
#print-button a {
      articleContentHtml +=
  color: black;
        '<p class="article-type">' +
  text-decoration: none;
        typeHtml +
}
        "</p>" +
        '<div class="article-metadata">' +
        '<div class="article-metadata-column">' +
        '<p class="article-metadata-label">Entity</p>' +
        '<p class="article-metadata-value">' +
        entity +
        "</p>" +
        "</div>" +
        '<div class="article-metadata-column">' +
        '<p class="article-metadata-label">Discipline</p>' +
        '<p class="article-metadata-value">' +
        discipline +
        "</p>" +
        "</div>" +
        '<div class="article-metadata-column">' +
        '<p class="article-metadata-label">Subject(s)</p>' +
        '<p class="article-metadata-value">' +
        subjectHtml +
        "</p>" +
        "</div>" +
        "</div>";


      // Add images if any
#print-button a:hover {
      if (cardImages.length > 0) {
  text-decoration: underline;
        var initialImage = cardImages[0]; // Use the first image initially
}
        var enableNavigation = cardImages.length > 1; // Enable navigation only if more than one image
        articleContentHtml +=
          '<div class="article-images">' +
          getImageHtml(initialImage, 0, cardImages.length, enableNavigation) +
          "</div>";
      }
      // Add non-image content (description, reflection, etc.)
      articleContentHtml +=
        (description
          ? '<p class="article-label-description">Description</p>' +
            '<div class="article-description">' +
            formatParagraphs(description) +
            "</div>"
          : "") +
        (reflection
          ? '<p class="article-label-reflection">Reflection</p>' +
            '<div class="article-reflection">' +
            formatParagraphs(reflection) +
            "</div>"
          : "") +
        (quote
          ? '<p class="article-label-quote">Quote</p>' +
            '<p class="article-quote">' +
            quote +
            "</p>"
          : "") +
        '<p class="article-label-modification-date">Added on</p>' +
        '<div class="article-modification-date">' +
        modificationDate +
        "</div>";


      $("#article-content").html(articleContentHtml);
.entryPage-printBtn {
    } else {
  right: 0 !important;
      // Handle card elements (existing logic)
}
      var cardImages = [];
      for (var i = 1; i <= 5; i++) {
        var imageClass = ".image" + i;
        var captionClass = ".caption-image" + i;
        var imageElem = $(cardElement).find(imageClass + " img");


        if (imageElem.length) {
#print-chooser {
          var captionText = $(cardElement)
  position: absolute;
            .find(imageClass + " " + captionClass)
  top: 36px;             
            .text();
  right: 8px;             
          cardImages.push({
  display: none;         
             link: $(cardElement)
  white-space: nowrap;   
              .find(imageClass + " a")
  font-size: 14px;
              .attr("href"),
  line-height: 20px;
            src: imageElem.attr("src"),
}
            alt: imageElem.attr("alt"),
            caption: captionText,
            captionClass: "caption-image" + i,
          });
        }
      }


      if (cardImages.length > 1) {
/* Links styled like pills (MW-safe) */
        setupImageToggle(cardImages);
#print-chooser .print-choice {
      }
  display: inline-block;
      var entryNumber = $(cardElement).find(".entry-number").text();
  padding: 2px 4px;
      var title = $(cardElement).find(".title").text();
  text-decoration: none;
      var peopleHtml = $(cardElement).find(".people").html();
  background: #ececec;
      var typeHtml = $(cardElement).find(".type").html();
  color: #767676;
      var externalPdfURL = $(cardElement).find(".pdf a").attr("href");
  margin-top: 2px;
      var externalLinkURL = $(cardElement).find(".link a").attr("href");
}
      var entity = $(cardElement).find(".entity").text();
      var discipline = $(cardElement).find(".discipline").text();
      var subjectHtml = $(cardElement).find(".subject").html();
      var description = $(cardElement).find(".description").html();
      var reflection = $(cardElement).find(".reflection").html();
      var quote = $(cardElement).find(".quote").text();
      var externalReferenceHtml = $(cardElement)
        .find(".external-reference")
        .html();
      var modificationDate = $(cardElement).find(".modification-date").text();
      var relatedArticlesHtml = $(cardElement).find(".related-articles").html();


      $("#article-title").html(
#print-chooser .print-choice + .print-choice { margin-left: 6px; }
        '<p class="article-entry-number">' +
          entryNumber +
          '</p><p class="article-people">' +
          peopleHtml +
          "</p>"
      );


      var articleContentHtml = '<div class="article-title-link">';
#print-chooser .print-choice:hover,
      articleContentHtml += '<p class="article-title">' + title + "</p>";
#print-chooser .print-choice:focus {
  text-decoration: none;
  color: black;
}


      // Create a div that will wrap the links
.fade-out {
      articleContentHtml += '<div class="link-pdf">';
    position: absolute;
      if (externalPdfURL) {
    width: 100%;
        articleContentHtml +=
    height: 100%;
          '<a href="' +
    background: #FAFAFA;
          externalPdfURL +
    opacity: 0.4;
          '" target="_blank" class="pdf-link-icon">[PDF<span class="text-symbol">⤴</span>]</a>';
    z-index: 999;
      }
}
      if (externalLinkURL) {
        articleContentHtml +=
          '<a href="' +
          externalLinkURL +
          '" target="_blank" class="external-link-icon">[WEB<span class="text-symbol">⤴</span>]</a>';
      }
      // Close the .link-pdf div
      articleContentHtml += "</div>";
      articleContentHtml += "</div>"; // Close the new div


      // Append type, entity, discipline, and subject details
/* -----END<------ POP UP ARTICLE */
      articleContentHtml +=
        '<p class="article-type">' +
        typeHtml +
        "</p>" +
        '<div class="article-metadata">' +
        '<div class="article-metadata-column">' +
        '<p class="article-metadata-label">Entity</p>' +
        '<p class="article-metadata-value">' +
        entity +
        "</p>" +
        "</div>" +
        '<div class="article-metadata-column">' +
        '<p class="article-metadata-label">Discipline</p>' +
        '<p class="article-metadata-value">' +
        discipline +
        "</p>" +
        "</div>" +
        '<div class="article-metadata-column">' +
        '<p class="article-metadata-label">Subject(s)</p>' +
        '<p class="article-metadata-value">' +
        subjectHtml +
        "</p>" +
        "</div>" +
        "</div>";
      // Add images if any
      if (cardImages.length > 0) {
        var initialImage = cardImages[0]; // Use the first image initially
        var enableNavigation = cardImages.length > 1; // Enable navigation only if more than one image
        articleContentHtml +=
          '<div class="article-images">' +
          getImageHtml(initialImage, 0, cardImages.length, enableNavigation) +
          "</div>";
      }
      // Add non-image content (description, reflection, etc.)
      articleContentHtml +=
        (description
          ? '<p class="article-label-description">Description</p>' +
            '<div class="article-description">' +
            formatParagraphs(description) +
            "</div>"
          : "") +
        (reflection
          ? '<p class="article-label-reflection">Reflection</p>' +
            '<div class="article-reflection">' +
            formatParagraphs(reflection) +
            "</div>"
          : "") +
        (externalReferenceHtml
          ? '<p class="article-label-external-reference">References</p>' +
            '<p class="article-external-reference">' +
            externalReferenceHtml +
            "</p>"
          : "") +
        (quote
          ? '<p class="article-label-quote">Quote</p>' +
            '<p class="article-quote">' +
            quote +
            "</p>"
          : "") +
        '<p class="article-label-modification-date">Added on</p>' +
        '<div class="article-modification-date">' +
        modificationDate +
        "</div>";


      $("#article-content").html(articleContentHtml);
      $("#related-articles").html(relatedArticlesHtml);


      if (relatedArticlesHtml && relatedArticlesHtml.trim().length > 0) {
/* ----->START------ EVENT HOMEPAGE  */
        $("#related-articles")
#show-event-wrapper {
          .html(
    display: block;
            '<div class="related-articles-label">Related Articles</div><div class="related-articles-container">' +
    position: fixed; /* Change to fixed */
              relatedArticlesHtml +
    top: 0;
              "</div>"
    /*right: 24px;*/
          )
    right: 1.3%;
          .show();
    width: 41%;
      }
    height: 100vh; /* Set to full viewport height */
     }
    overflow: auto; /* Enables scrolling if content overflows */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    z-index: 9999; /* Ensure it's above #list */
    /*padding-left: 100px;*/
    margin-top: 50px;
}
#show-event {
    background-color: #FAFAFA;
    border: 3px solid;
    padding: 0px 10px 0 10px;
    position: relative;
    top: 40px;
    /*margin-left: 36px;*/
    margin-left: 4.6%;
}
.event-entry-number {
    border-bottom: 1px solid black;
    font-size: 19px;
    line-height: 23px;
    letter-spacing: 0px;
    padding-bottom: 5px;
    padding-top: 7px;
}
.event-people {
    font-size: 25px;
    line-height: 30px;
    letter-spacing: 1.4px;
    text-decoration: underline;
    text-align: center;
    padding-top: 25px;
    margin-bottom: 5px !important;
}
.event-people a {
    color: black;
    text-decoration: underline;
}
.event-title-link {
    border-bottom: 1px solid black;
    padding-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.event-title {
    font-size: 25px;
    line-height: 30px;
    letter-spacing: 1.4px;
    text-align: center;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    max-width: 70%;
}
.event-link {
     display: flex;
    margin-top: 5px;
    align-items: center;
}


    // Check which view is active and set the width accordingly
/* -----END<------ EVENT HOMEPAGE */
    if ($(".home-chronicle-list").is(":visible")) {
      $(".home-list-view").each(function () {
        var currentWidth = $(this).width(); // Get the current width
        $(this).data("originalWidth", currentWidth); // Store the original width
        $(this).css("width", "calc(60% - 2px)");
      });


      // Modify the .type elements within .home-chronicle-list
/* ----->START------ FOOTER and SEARCH  */
      $(".home-chronicle-list .type").each(function () {
#view-more-footer {
        var currentLeft = $(this).css("left"); // Get the current left value
    display: none;
        $(this).data("originalLeft", currentLeft); // Store the original left value
}
        $(this).css("left", "85%");
.footer {
      });
  position: fixed;
    } else if ($(".home-chronicle-block").is(":visible")) {
  left: 0;
      $(".home-chronicle-block div.list-container").each(function () {
  bottom: 0;
        var currentWidth = $(this).width(); // Get the current width
  width: 100%;
        $(this).css("width", "calc(60% - 0px)"); // Set the new width as 30% of the current width
  box-sizing: border-box;
      });
  z-index: 11;
      $(".home-chronicle-block div.list-container div.card").each(function () {
  background: transparent linear-gradient(180deg, #FFF0 0%, rgba(250, 250, 250, 0.97) 80%) 0% 0% no-repeat padding-box;
        var currentWidth = $(this).width(); // Get the current width
  padding-bottom: 1%;
        $(this).css("width", "calc(33.333% - 0px)"); // Set the new width as 30% of the current width
  padding-top: 100px;
      });
  padding-left: 1.3%;
    }
  padding-right: 1.3%;
 
  display: flex;
  justify-content: flex-start; /* Aligns the buttons to the right */
  align-items: center; /* Vertically center the items */
}


     // Apply the fade-out effect to both #list and #list-list elements
.submit-container {
     $(".list-container").addClass("fade-out");
     position: relative; /* Positioning context for absolute children */
  }
    display: inline-block; /* Constrain hover area to the container */
    width: calc(20% - 0px);
}
#submit {
    font-size: 17px;
    line-height: 22px;
    letter-spacing: 0.37px;
     cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="4.5" fill="white" stroke="black" stroke-width="1" /></svg>') 14 14, auto;
    color: black !important;
}
#submit:hover {
    color: black;
    text-decoration: underline;
}
.submit-hide {
    opacity: 0; /* Make it invisible initially */
    visibility: hidden; /* Ensure it's not interactable */
    display: none;
    background: black;
    width: 20%;
    position: absolute; /* Position relative to the parent */
    bottom: 100%; /* Position above the parent */
    left: 0; /* Align left with the parent */
    z-index: 1; /* Ensure it's above other content */
    transform: translateY(-10px); /* Slightly offset to prevent overlap */
}
.submit-hide p {
    color: white!important;
    font-size: 17px;
    line-height: 22px;
    letter-spacing: 0.37px;
    padding: 10px;
}
.submit-hide p .italics {
    color: white;
    font-style: italic;
}
.submit-hide p .underline {
    text-decoration: underline;
}
.submit-container:hover .submit-hide {
    display: block;
    opacity: 1;
    visibility: visible;
    width: auto;
}


  // closeModal function
  function closeModal() {
    $("#print-chooser").hide();
    $("#show-article").removeClass("print-opts-open");
    if ($(".home-chronicle-list").is(":visible")) {
      $(".home-list-view").css("width", "100%");
      $(".home-chronicle-list div.list-container div.card div.type").css(
        "left",
        "90%"
      );
    } else if ($(".home-chronicle-block").is(":visible")) {
      updateWidthBlockView();
    }
    showArticleWrapper.hide();
  }


  $(".card").on("click", function (event) {
    // Check if the click event is originating from a link within .people or .type, or any other specific area
    if ($(event.target).closest(".people a, .type a").length) {
      // The click is inside a link; let the default behavior proceed without opening the modal
      return;
    }


    // Prevent further event handling if the card has the 'event' class
.suggestions {
    if ($(this).hasClass("event")) {
     display: none!important;
      event.stopImmediatePropagation();
}
      openEvent(this, event);
      $(".list-container").removeClass("fade-out");
      closeModal();
     } else {
      // Handle cards without the 'event' class
      openModal(this, event);
      setShowArticleRotationEffect();
    }
  });


   $("#show-article-wrapper").on("click", ".related-article", function (event) {
.simpleSearch {
     openModal(this, event); // Call openModal when a related-article is clicked
   position: relative;
     setShowArticleRotationEffect();
  display: inline-block;
  });
  width: calc(20% - 0px);
}
#simpleSearch, #simpleSearchSpecial {
    text-align: left;
    letter-spacing: normal;
    font-family: 'HALColant-TextRegular';
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="4.5" fill="white" stroke="black" stroke-width="1" /></svg>') 14 14, auto;
    text-transform: uppercase;
    background: none;
     border: none;
    font-size: 17px;
     line-height: 20px;
}


  // HERE SHOULD BE THE NEW CODE!!!!
/* Style footer background and gradient */
  /* ---------- Softwear PRINT (scoped, ES5-safe) ---------- */
#simpleSearch:before, #simpleSearchSpecial:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}


  /* helpers */
#searchInput,
  function swPrintPreloadFont() {
.closing-bracket {
     var link = document.createElement("link");
     display: none;
     link.rel = "preload";
     border: none;
    link.as = "font";
}
    link.type = "font/woff2";
.searchresult {
    link.href = "/fonts/HALColant-TextRegular.woff2?v=20250820";
    display: none;
    link.crossOrigin = "anonymous";
}
    document.head.appendChild(link);
#simpleSearch:hover #searchInput {
  }
  display: inline-block;
  border-bottom: 1px solid black;
  margin-left: -9.5px;
  background: #FAFAFA;
  width: calc(75% - 20px); /* Default width */
}


  function swPrintCacheBust(url) {
/* Small screens */
     return url + (url.indexOf("?") > -1 ? "&" : "?") + "_=" + Date.now();
@media (max-width: 600px) {
  #simpleSearch:hover #searchInput {
     width: calc(50% - 20px);
   }
   }
}


  function swEnsurePrintChooser() {
/* Medium screens */
    var $chooser = jQuery("#print-chooser");
@media (min-width: 601px) and (max-width: 760px) {
    if ($chooser.length) return $chooser;
  #simpleSearch:hover #searchInput {
 
     width: calc(50% - 20px);
    $chooser = jQuery(
      '<div id="print-chooser" class="print-chooser" style="display:none;">' +
        '<a href="#" id="print-with-border" class="print-choice">show border</a> ' +
        '<a href="#" id="print-no-border" class="print-choice">hide border</a>' +
        "</div>"
    );
    jQuery("#print-button").after($chooser);
 
    // Bind once on the chooser to catch nested elements
     if (!$chooser.data("swBound")) {
      function chooserFire(ev, where) {
        ev = ev || window.event;
        var t = ev && (ev.target || ev.srcElement);
        var a = t && t.closest ? t.closest("a[id]") : null;
        if (!a) return;
        var id = a.getAttribute("id");
        if (id !== "print-with-border" && id !== "print-no-border") return;
        if (ev.preventDefault) ev.preventDefault();
        if (ev.stopImmediatePropagation) ev.stopImmediatePropagation();
        if (ev.stopPropagation) ev.stopPropagation();
        swHandlePrintChoice(id, (window.jQuery && jQuery(a)) || null);
        return false;
      }
      $chooser.on("pointerdown", chooserFire);
      $chooser.on("touchstart", chooserFire);
      $chooser.on("mousedown", chooserFire);
      $chooser.on("click", chooserFire);
      $chooser.data("swBound", true);
    }
    return $chooser;
   }
   }
}


  function swHidePrintUI() {
/* Medium large screens */
    jQuery("#print-chooser").hide();
@media (min-width: 761px) and (max-width: 900px) {
     jQuery("#show-article").removeClass("print-opts-open");
  #simpleSearch:hover #searchInput {
     width: calc(50% - 20px);
   }
   }
}


  /* small boot probe */
/* Large screens */
  (function () {
@media (min-width: 901px) and (max-width: 1000px) {
    try {
   #simpleSearch:hover #searchInput {
      console.log("[swprint] probe on load", {
     width: calc(60% - 20px);
        printButton: !!document.getElementById("print-button"),
        chooserExists: !!document.getElementById("print-chooser"),
        localPrintOnlyCount: jQuery(".print-only").length,
        showArticleExists: !!document.getElementById("show-article"),
      });
    } catch (e) {}
   })();
 
  /* core: build iframe and print */
  function swBuildIframeAndPrint(printHtml, borderPref, $btn) {
    // iframe
    var iframe = document.createElement("iframe");
    iframe.style.position = "fixed";
    iframe.style.right = "0";
    iframe.style.bottom = "0";
    iframe.style.width = "0";
    iframe.style.height = "0";
    iframe.style.border = "0";
    document.body.appendChild(iframe);
 
    var doc = iframe.contentDocument || iframe.contentWindow.document;
    doc.open();
    doc.write(
      '<!doctype html><html><head><meta charset="utf-8"><title>Print</title></head><body></body></html>'
    );
    doc.close();
 
    // make relative URLs resolve
    var base = doc.createElement("base");
    base.href = location.origin + "/";
    doc.head.appendChild(base);
 
    // print.css
    var linkCss = doc.createElement("link");
    linkCss.rel = "stylesheet";
    linkCss.href = swPrintCacheBust(
      "/index.php?title=MediaWiki:Print.css&action=raw&ctype=text/css"
    );
    linkCss.media = "print";
 
    var cssLoaded = new Promise(function (resolve) {
      linkCss.onload = resolve;
      linkCss.onerror = resolve;
    });
 
    // font preload (inside iframe)
    var linkFont = doc.createElement("link");
    linkFont.rel = "preload";
    linkFont.as = "font";
    linkFont.type = "font/woff2";
    linkFont.href = "/fonts/HALColant-TextRegular.woff2?v=20250820";
    linkFont.crossOrigin = "anonymous";
 
    doc.head.appendChild(linkFont);
    doc.head.appendChild(linkCss);
 
    // inject HTML
    doc.body.innerHTML = printHtml;
 
    // sanitize: remove inner .print-no-border if user chose WITH border
    (function () {
      var stray = doc.querySelectorAll(".print-no-border");
      if (borderPref === "with" && stray.length) {
        Array.prototype.forEach.call(stray, function (el) {
          el.className = (el.className || "")
            .replace(/\bprint-no-border\b/g, "")
            .trim();
        });
      }
    })();
 
    // apply border preference to <html>
    (function () {
      var htmlEl = doc.documentElement;
      if (borderPref === "without") {
        if (htmlEl.classList) htmlEl.classList.add("print-no-border");
        else if (
          (" " + htmlEl.className + " ").indexOf(" print-no-border ") === -1
        ) {
          htmlEl.className += " print-no-border";
        }
      } else {
        if (htmlEl.classList) htmlEl.classList.remove("print-no-border");
        else
          htmlEl.className = (htmlEl.className || "").replace(
            /\bprint-no-border\b/g,
            ""
          );
      }
    })();
 
    // OPTIONAL: glue label + body together (extra safety vs. page breaks)
    (function () {
      var style = doc.createElement("style");
      style.textContent =
        "@media print{.sw-keep{break-inside:avoid;page-break-inside:avoid;}}";
      doc.head.appendChild(style);
 
      var pairs = [
        [".article-label-description", ".article-description"],
        [".article-label-reflection", ".article-reflection"],
        [".article-label-external-reference", ".article-external-reference"],
        [".article-label-quote", ".article-quote"],
        [".article-label-modification-date", ".article-modification-date"],
      ];
 
      for (var i = 0; i < pairs.length; i++) {
        var labelSel = pairs[i][0];
        var bodySel = pairs[i][1];
        var labels = doc.querySelectorAll(labelSel);
        for (var j = 0; j < labels.length; j++) {
          var label = labels[j];
          var body = label.nextElementSibling;
          if (!body || !body.matches(bodySel)) continue;
          var wrap = doc.createElement("div");
          wrap.className = "sw-keep";
          label.parentNode.insertBefore(wrap, label);
          wrap.appendChild(label);
          wrap.appendChild(body);
        }
      }
    })();
 
    // clean empty paragraphs
    (function () {
      var ps = doc.querySelectorAll("#article-content p");
      Array.prototype.forEach.call(ps, function (p) {
        var txt = (p.textContent || "").replace(/\u00a0/g, " ").trim();
        var onlyBr =
          p.children &&
          p.children.length === 1 &&
          p.firstElementChild &&
          p.firstElementChild.tagName === "BR";
        if (
          (!txt && !p.querySelector("img, a, strong, em, span:not(:empty)")) ||
          onlyBr
        ) {
          if (p.parentNode) p.parentNode.removeChild(p);
        }
      });
      var root = doc.getElementById("article-content");
      if (root) {
        var kids = Array.prototype.slice.call(root.childNodes);
        for (var k = 0; k < kids.length; k++) {
          var n = kids[k];
          if (n.nodeType === 3 && !n.textContent.replace(/\s+/g, "")) {
            root.removeChild(n);
          }
        }
      }
    })();
 
    // inline micro-tweaks for print spacing
    (function () {
      var css =
        "@media print{" +
        "  .article-description p,.article-reflection p,.article-external-reference p,.article-quote p{margin:0 0 1.2mm!important;}" +
        "  .article-description p:last-child,.article-reflection p:last-child,.article-external-reference p:last-child,.article-quote p:last-child{margin-bottom:0!important;}" +
        "  .article-entry-number,.link-pdf,.article-type,.article-metadata,.article-images,.article-description,.article-reflection,.article-external-reference,.article-quote,.article-mod-line{padding-bottom:1mm!important;}" +
        "  .article-label-description + .article-description," +
        "  .article-label-reflection + .article-reflection," +
        "  .article-label-external-reference + .article-external-reference," +
        "  .article-label-quote + .article-quote," +
        "  .article-label-modification-date + .article-modification-date{margin-top:0!important;}" +
        "  .article-title-link{margin:0!important;padding:0!important;}" +
        "  .article-title-link > *{margin:0!important;}" +
        "  .link-pdf{margin-top:0!important;}" +
        "  #article-content > :last-child{padding-bottom:0!important;}" +
        "  #article-content > :last-child::after{content:none!important;}" +
        "}";
      var style = doc.createElement("style");
      style.type = "text/css";
      style.appendChild(doc.createTextNode(css));
      doc.head.appendChild(style);
     })();
 
    // link tweaks (wrapping / underline)
    (function () {
      var styleFix = doc.createElement("style");
      styleFix.textContent =
        "@media print {.article-external-reference a,.link-pdf a{white-space:nowrap!important;word-break:normal!important;overflow-wrap:normal!important;text-decoration:underline}.article-external-reference{overflow-wrap:anywhere;word-break:break-word}a[href]{position:relative}}";
      doc.head.appendChild(styleFix);
 
      var refs = doc.querySelectorAll(".article-external-reference a[href]");
      Array.prototype.forEach.call(refs, function (a) {
        var txt = (a.textContent || "").trim();
        var href = a.getAttribute("href") || "";
        var looksLongUrl = /^https?:\/\//i.test(txt) && txt.length > 60;
        if (looksLongUrl) {
          try {
            var u = new URL(href, doc.baseURI);
            var label =
              u.hostname + (u.pathname.replace(/\/$/, "") ? u.pathname : "");
            if (label.length > 40) label = label.slice(0, 37) + "…";
            a.textContent = label;
          } catch (e) {
            a.textContent = "Link";
          }
        }
        a.style.whiteSpace = "nowrap";
        a.style.wordBreak = "normal";
        a.style.overflowWrap = "normal";
      });
    })();
 
    // waits
    function waitImages() {
      var imgs = [].slice.call(doc.images || []);
      if (!imgs.length) return Promise.resolve();
      return Promise.all(
        imgs.map(function (img) {
          if (img.decode) {
            try {
              return img.decode().catch(function () {});
            } catch (e) {}
          }
          return new Promise(function (res) {
            if (img.complete) return res();
            img.onload = img.onerror = function () {
              res();
            };
          });
        })
      );
    }
    function waitFonts(timeoutMs) {
      if (!doc.fonts || !doc.fonts.ready) return Promise.resolve();
      var ready = doc.fonts.ready;
      var t = new Promise(function (res) {
        setTimeout(res, timeoutMs || 1200);
      });
      return Promise.race([ready, t]);
    }
    function waitSpecificFont(timeoutMs) {
      if (!doc.fonts || !doc.fonts.load) return Promise.resolve();
      var p = Promise.all([
        doc.fonts.load('400 16px "HALColant-TextRegular"'),
        doc.fonts.load('normal 16px "HALColant-TextRegular"'),
      ]);
      var t = new Promise(function (res) {
        setTimeout(res, timeoutMs || 1200);
      });
      return Promise.race([p, t]);
    }
    function nextFrame() {
      return new Promise(function (res) {
        (iframe.contentWindow.requestAnimationFrame || setTimeout)(res, 0);
      });
    }
 
    Promise.all([
      cssLoaded,
      waitImages(),
      waitFonts(1200),
      waitSpecificFont(1200),
      nextFrame(),
    ])
      .then(function () {
        // filename via document.title
        var entryNum = "";
        var numEl = doc.querySelector(".article-entry-number");
        if (numEl) {
          var m = (numEl.textContent || "").match(/\d+/);
          entryNum = m ? m[0] : "";
        }
        var desiredTitle =
          (entryNum ? entryNum + "." : "") + "softwear.directory";
        var oldIframeTitle = doc.title;
        var oldParentTitle = document.title;
 
        iframe.contentWindow.onafterprint = function () {
          try {
            doc.title = oldIframeTitle;
            document.title = oldParentTitle;
          } catch (e) {}
          setTimeout(function () {
            if (iframe.parentNode) iframe.parentNode.removeChild(iframe);
          }, 100);
          if ($btn && $btn.length) $btn.data("busy", false);
        };
 
        doc.title = desiredTitle;
        document.title = desiredTitle;
 
        iframe.contentWindow.focus();
        iframe.contentWindow.print();
 
        // safety cleanup
        setTimeout(function () {
          try {
            doc.title = oldIframeTitle;
            document.title = oldParentTitle;
          } catch (e) {}
          if (iframe.parentNode) iframe.parentNode.removeChild(iframe);
          if ($btn && $btn.length) $btn.data("busy", false);
        }, 1000);
      })
      .catch(function () {
        if ($btn && $btn.length) $btn.data("busy", false);
      });
   }
   }
}


  /* decide source & kick print */
/* Large screens */
  function swHandlePrintChoice(id, $btn) {
@media (min-width: 1001px) and (max-width: 1100px) {
    if ($btn && $btn.data("busy")) return;
  #simpleSearch:hover #searchInput {
    if ($btn && $btn.length) $btn.data("busy", true);
     width: calc(65% - 20px);
 
    var borderPref = id === "print-no-border" ? "without" : "with";
    swPrintPreloadFont();
 
    // prefer local .print-only (Entry page)
    var localPrintOnly = jQuery(".print-only").first();
    if (localPrintOnly.length) {
      swHidePrintUI();
      swBuildIframeAndPrint(localPrintOnly.prop("outerHTML"), borderPref, $btn);
      return;
    }
 
    // otherwise fetch by title (modal/home)
    var title =
      window.currentEntryTitle ||
      (window.mw && mw.config && mw.config.get && mw.config.get("wgPageName"));
    if (!title) {
      window.print();
      if ($btn && $btn.length) $btn.data("busy", false);
      return;
    }
 
     var pageUrl =
      window.mw && mw.util && mw.util.getUrl
        ? mw.util.getUrl(title)
        : "/wiki/" + String(title);
 
    jQuery
      .get(swPrintCacheBust(pageUrl))
      .done(function (html) {
        var $tmp = jQuery("<div>").html(html);
        var $print = $tmp.find(".print-only").first();
        if (!$print.length) {
          window.print();
          if ($btn && $btn.length) $btn.data("busy", false);
          return;
        }
        swHidePrintUI();
        swBuildIframeAndPrint($print.prop("outerHTML"), borderPref, $btn);
      })
      .fail(function () {
        window.print();
        jQuery("#print-button").data("busy", false);
      });
   }
   }
}


  /* bind current choice anchors (defensive, for Entry pages) */
/* Large screens */
  function swBindChoiceAnchors() {
@media (min-width: 1101px) and (max-width: 1200px) {
    var sel = "#print-with-border, #print-no-border";
  #simpleSearch:hover #searchInput {
    var els = document.querySelectorAll(sel);
    width: calc(65% - 20px);
    for (var i = 0; i < els.length; i++) {
      (function (el) {
        if (el.__swChoiceBound) return;
        el.__swChoiceBound = true;
 
        // ensure clickable/accessible
        try {
          el.style.pointerEvents = el.style.pointerEvents || "auto";
          if (!el.getAttribute("role")) el.setAttribute("role", "button");
          if (!el.getAttribute("tabindex")) el.setAttribute("tabindex", "0");
        } catch (e) {}
 
        function fire(ev) {
          if (ev && ev.preventDefault) ev.preventDefault();
          if (ev && ev.stopImmediatePropagation) ev.stopImmediatePropagation();
          if (ev && ev.stopPropagation) ev.stopPropagation();
          var $a = (window.jQuery && jQuery(el)) || null;
          swHandlePrintChoice(el.id, $a);
          return false;
        }
 
        // early + normal phases
        el.addEventListener("pointerdown", fire, true);
        el.addEventListener("touchstart", fire, true);
        el.addEventListener("mousedown", fire, true);
        el.addEventListener("click", fire, true);
        el.addEventListener("click", fire, false);
        if (!el.onclick) el.onclick = fire;
 
        // keyboard
        el.addEventListener(
          "keydown",
          function (e) {
            var k = e.key || e.keyCode;
            if (k === "Enter" || k === 13 || k === " " || k === 32) fire(e);
          },
          true
        );
      })(els[i]);
    }
   }
   }
}


  /* early global catcher (minimal) */
/* Large screens */
  (function () {
@media (min-width: 1201px) and (max-width: 1300px) {
    if (window.__swprintEarlyCatcher) return;
   #simpleSearch:hover #searchInput {
    window.__swprintEarlyCatcher = true;
     width: calc(70% - 20px);
 
    function routeEarly(ev) {
      var t = ev.target;
      if (!t || !t.closest) return;
      var a = t.closest("a#print-with-border, a#print-no-border");
      if (!a) return;
      if (ev.preventDefault) ev.preventDefault();
      if (ev.stopImmediatePropagation) ev.stopImmediatePropagation();
      if (ev.stopPropagation) ev.stopPropagation();
      swHandlePrintChoice(a.id, (window.jQuery && jQuery(a)) || null);
      return false;
    }
 
    window.addEventListener("pointerdown", routeEarly, true);
    window.addEventListener("touchstart", routeEarly, true);
    window.addEventListener("mousedown", routeEarly, true);
  })();
 
  /* wiring (namespaced) */
  jQuery(document).off("click.swprint");
  jQuery(document).on(
    "click.swprint",
    "#print-button, #print-chooser, #print-options",
    function (e) {
      // main [print] toggler
      if (jQuery(e.target).closest("#print-button").length) {
        e.preventDefault();
        var $chooser = swEnsurePrintChooser();
        $chooser.css({ position: "absolute", zIndex: 99999 });
        $chooser.toggle();
        var visible = $chooser.is(":visible");
        jQuery("#show-article").toggleClass("print-opts-open", visible);
 
        // ensure anchors are bound (important on Entry pages)
        swBindChoiceAnchors();
        return;
      }
 
      // click directly on a choice link (fallback path)
      var $choice = jQuery(e.target).closest(
        "a#print-with-border, a#print-no-border"
      );
      if (!$choice.length) return;
      e.preventDefault();
      swHandlePrintChoice($choice.attr("id"), $choice);
    }
  );
 
  // map any <button> inside chooser to its host anchor
  jQuery(document).on(
    "click.swprintChoiceBtn2",
    "#print-chooser button",
    function (e) {
      var host = this.closest(
        '[id="print-with-border"], [id="print-no-border"]'
      );
      if (!host) return;
      e.preventDefault();
      swHandlePrintChoice(host.id, (window.jQuery && jQuery(host)) || null);
    }
  );
 
  // hide choices on ESC
  jQuery(document).on("keydown.swprint", function (e) {
    if (e && e.keyCode === 27) swHidePrintUI();
  });
 
  /* ---------- /Softwear PRINT ---------- */
 
  // Close modal with Close button
  $("#close-button").on("click", function () {
    $("#print-chooser").hide();
    $("#show-article").removeClass("print-opts-open");
 
    $(".list-container").removeClass("fade-out");
    closeModal();
  });
 
  // Close modal and remove fade out also when clicking outside of card
  $(document).on("mousedown", function (event) {
    var isOutsideWrapper =
      !showArticleWrapper.is(event.target) &&
      showArticleWrapper.has(event.target).length === 0;
    var isOnCard = $(event.target).closest(".card, .list-card").length > 0;
 
    if (!areFiltersActive) {
      if (isOutsideWrapper && !isOnCard) {
        $(".list-container").removeClass("fade-out");
        showArticleWrapper.css("display", "none");
        closeModal(); // Use closeModal() for cleanup
      }
    }
  });
 
  // Hover effect for scrolling
   $("#show-article-wrapper").hover(
    function () {
      // On hover, enable scrolling on #show-article-wrapper
      $(this).css("overflow-y", "auto");
      $(this).css("overflow-x", "hidden");
    },
    function () {
      // On hover out, disable scrolling on #show-article-wrapper
      $(this).css("overflow-y", "hidden");
      $(this).css("overflow-x", "hidden");
     }
  );
 
  // Format community card, when in the Community Entries page
  if ($(".community-card").length) {
    formatCommunityCardDescriptions();
   }
   }
}


  function formatCommunityCardDescriptions() {
/* Large screens */
    $(".community-card").each(function () {
@media (min-width: 1301px) and (max-width: 1400px) {
      // Format paragraphs in community-description
  #simpleSearch:hover #searchInput {
      var descriptionContainer = $(this).find(".community-description");
    width: calc(70% - 20px);
      var rawDescription = descriptionContainer.text();
      var formattedDescription = formatParagraphs(rawDescription);
      descriptionContainer.html(formattedDescription);
 
      // Remove empty elements in the entire card
      $(this)
        .find("*")
        .each(function () {
          if ($(this).is(":empty") || $(this).html().trim() === "<br>") {
            $(this).remove();
          }
        });
    });
   }
   }
}


  if ($("#show-article-wrapper-entry").length) {
    // Your existing formatParagraphs function
    function formatParagraphs(text) {
      var paragraphs = text.split("\n").filter(function (p) {
        return p.trim() !== "";
      });
      return paragraphs
        .map(function (p) {
          return "<p>" + p.trim() + "</p>";
        })
        .join("");
    }


    // Check if ".article-description" exists and format its text
/* Large screens */
    if ($(".article-description").length) {
@media (min-width: 1401px) and (max-width: 1750px) {
      var descriptionText = $(".article-description").text();
  #simpleSearch:hover #searchInput {
      var formattedDescription = formatParagraphs(descriptionText);
    width: calc(75% - 20px);
      $(".article-description").html(formattedDescription); // Set the formatted text
    }
 
    // Check if ".article-reflection" exists and format its text
    if ($(".article-reflection").length) {
      var reflectionText = $(".article-reflection").text();
      var formattedReflection = formatParagraphs(reflectionText);
      $(".article-reflection").html(formattedReflection); // Set the formatted text
    }
   }
   }
}


  // SEARCH  ---------------------  SECTION //
/* Large screens */
  // Check if div with class "mw-search-results-info" exists
@media (min-width: 1751px) {
  if ($(".mw-search-results-info").length) {
  #simpleSearch:hover #searchInput {
    // Select the child <p> element and check its content
     width: calc(80% - 20px);
     var $paragraph = $(".mw-search-results-info > p");
    var currentText = $paragraph.text().trim();
 
    // Check if the current text is not "There were no results matching the query."
    if (currentText !== "There were no results matching the query.") {
      // Overwrite the content with "Search results"
      $paragraph.text("Pages related to your Search");
    }
   }
   }
}


  // Object to store encountered titles
  var encounteredTitles = {};


  // Iterate over each search result
  $(".mw-search-result-heading").each(function () {
    // Get the title of the current search result
    var title = $(this).find("a").attr("title");


    // Check if the title has already been encountered
    if (encounteredTitles[title]) {
      // Hide the duplicate search result
      $(this).hide();
    } else {
      // Mark the title as encountered
      encounteredTitles[title] = true;
    }
  });


  // Remove unwanted white spaces between lines
  $(".mw-search-results-container")
    .contents()
    .filter(function () {
      return this.nodeType === 3; // Filter text nodes
    })
    .remove();


  // Edits regarding Search Results
#simpleSearchSpecial:hover #searchInput {
  // Define the new form HTML as a string
     display: inline-block;
  var newFormHtml =
     border-bottom: 1px solid black;
     '<form action="/index.php" id="searchform">' +
     margin-left: -5px;
     '<div id="simpleSearchSpecial" class="right-inner-addon">' +
     background: #FAFAFA;
    "<span>[ Search ]</span>" +
}
     '<input class="form-control" name="search" placeholder="" title="Search [alt-shift-f]" accesskey="f" id="searchInput" tabindex="1" autocomplete="off" type="search">' +
     '<span class="closing-bracket">]</span>' +
    '<input value="Special:Search" name="title" type="hidden">' +
    "</div>" +
    "</form>";


  // Replace the div with id="searchText" with the new form
#simpleSearch:hover .closing-bracket, #simpleSearchSpecial:hover .closing-bracket {
  $("#searchText").replaceWith(newFormHtml);
    display: inline-block;
}


  // Target the button based on its complex class structure
  $(".oo-ui-actionFieldLayout-button .oo-ui-buttonInputWidget").remove();


  // Check if #submit button exists and add event listener if it does
/* ----->END------ FOOTER and SEARCH  */
  var submitButton = document.querySelector("#submit");


  if (submitButton) {
/* ----->START------ AUTHORS CREATORS  */
    // Add click event listener
/* Styling for Authors/Creators */
    submitButton.addEventListener("click", function (event) {
.smw-columnlist-container {
      event.preventDefault(); // Prevent the default link behavior
  top: 420px;
  position: relative;
  margin: 0;
  width: 100%;
}


      var email = "submit@softwear.directory";
.smw-column {
      var subject = "new entry to the softwear directory";
    width: 20%!important;
      var body =
}
        "☺ the following content could be interesting for the directory:\n\n" +
.smw-column ul li {
        "[ author / creator ]\n\n" +
    list-style: none;
        "---\n\n" +
}
        "[ title ]\n\n" +
.smw-column-header {
        "---\n\n" +
    font-weight:normal;
        "[ why should it be included? ]\n\n" +
    border-bottom: 1px solid black;
        "---\n\n" +
    margin-right: 10px;
        "[ link or pdf ]\n\n" +
}
        "---\n\n" +
.smw-column ul {
        "[ your name / contact / social ]\n\n" +
    font-size: 16pt;
        "---";
    line-height: 27px;
    letter-spacing: 0.4px;
    text-align: center;
    text-decoration: underline;
}
.smw-column a {
    color: black;
}
/* ----->END------ AUTHORS CREATORS */


      var mailtoLink =
/* ----->START------ COMMUNITY PAGE  */
        "mailto:" +
/* Styling for Community */
        encodeURIComponent(email) +
.community-col {
        "?subject=" +
    width: calc(100% - 0px);
        encodeURIComponent(subject) +
    box-sizing: border-box;
        "&body=" +
    height: fit-content;
        encodeURIComponent(body).replace(/%20/g, " ");
    padding: 0 0 0 0;
}
.community-main-text {
    margin-top: 0 !important;
    position: relative;
    top: 400px;
    font-size: 22px;
    line-height: 25px;
    letter-spacing: 0px;
}
#community-list {
    -moz-column-count: 5;
    -webkit-column-count: 5;
    -ms-column-count: 5;
    column-count: 5;
    -moz-column-gap: 10px;
    -ms-column-gap: 10px;
    -webkit-column-gap: 10px;
    column-gap: 10px;
    position: relative;
    margin: 0;
    width: 100%;
    top: 430px;
}


      window.location.href = mailtoLink;
.community-card {
     });
    font-size: 12px;
  }
    line-height: 25px;
    letter-spacing: 0.4px;
    display: inline-block;
     width: 100%;
    box-sizing: border-box;
    padding: 0 0 20px 0;
    margin-bottom: -1px; /* Negative margin, same as border thickness */
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    break-inside: avoid-column;
    z-index: 1; /* Ensures the card is above the bottom border of the card above */
    background: #FAFAFA; /* Assuming cards have a white background */
}
/* Add margin-top to individual community pages */
.community-page {
    position: relative;
    top: 300px;
}
/* Removes top border from the first card in each column */
#community-list .community-card:first-of-type {
    border-top: none;
}


  // Tooltip for "wander elsewhere..." on .card.event
/* Adds top border to the very first card in the grid */
   var tooltip = $(
#community-list .community-card:first-child {
     '<div class="tooltip-popup">wander elsewhere...</div>'
    border-top: 1px solid black;
   ).appendTo("body");
}
.community-name {
    font-size: 25px;
    line-height: 34px;
    letter-spacing: 1.4px;
    text-align: center;
    text-decoration: underline;
    padding-top: 45px;
    padding-bottom: 45px;
    border-bottom: 1px solid black;
}
.community-name a {
  color: black !important;
}
.community-name a:hover {
   font-style: italic;
}
.community-external-reference {
    text-align: center;
    font-size: 25px;
     line-height: 34px;
    letter-spacing: 1.4px;
    border-bottom: 1px solid black;
}
.community-external-reference a {
    color: white!important;
}
.community-external-reference a:hover {
    text-decoration: none;
    font-style: italic;
}
#community-list div.community-external-reference a {
  color: black !important;
   text-decoration:none;
}
.community-setting {
    font-size: 15px;
    line-height: 30px;
    letter-spacing: 0.48px;
    text-transform: uppercase;
    border-bottom: 1px solid black;
}
.community-location {
    font-size: 15px;
    line-height: 30px;
    letter-spacing: 0.48px;
    text-transform: uppercase;
    border-bottom: 1px solid black;
}
.community-type {
    font-size: 15px;
    line-height: 30px;
    letter-spacing: 0.48px;
    text-transform: uppercase;
    border-bottom: 1px solid black;
}
.community-domain {
    font-size: 15px;
    line-height: 30px;
    letter-spacing: 0.48px;
    text-transform: uppercase;
    border-bottom: 1px solid black;
}
.community-description p {
    text-indent: 35px;
    font-size: 19px;
    line-height: 26px;
    letter-spacing: 0.95px;
    margin: 0 !important;
}
.community-description-label {
    text-transform: uppercase;
    text-indent: 35px;
    font-size: 15px;
    margin: 0 !important;
    line-height: 30px;
}
/* ----->END------ COMMUNITY PAGE  */


  $(".card.event").on("mouseenter", function () {
/* ----->START------ SEARCH PAGE  */
     tooltip.css("opacity", 1);
.hidden {
   });
    display: none;
}
.oo-ui-layout.oo-ui-fieldLayout.oo-ui-fieldLayout-align-top.oo-ui-actionFieldLayout {
    margin-top: 420px;
}
.mw-search-exists {
     padding-bottom: 20px;
    font-size: 17px;
}
.mw-search-createlink {
    padding-bottom: 20px;
    font-size: 17px;
}
.mw-search-nonefound {
    padding-bottom: 20px;
    font-size: 17px!important;
}
#mw-content-text .searchresults {
    padding: 25px;
}
#mw-search-top-table div.oo-ui-actionFieldLayout {
   padding-left: 25px;
  padding-right: 25px;
}
/* ----->END------ SEARCH PAGE */


  $(".card.event").on("mousemove", function (e) {
/* ----->START------ TOOLTIP EVENT CARDS  */
    var offsetX = 10; // right of cursor
.tooltip-popup {
    var offsetY = -30; // above cursor
  position: fixed;
    tooltip.css({
  padding: 6px 12px;
      left: e.clientX + offsetX + "px",
  background-color: #f9f9f9;
      top: e.clientY + offsetY + "px",
  color: #111;  
    });
  font-size: 13px;
   });
  font-family: Arial, sans-serif;
  border: 1px solid #ccc;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
   z-index: 9999;
}
/* ----->END------ TOOLTIP EVENT CARDS */


  $(".card.event").on("mouseleave", function () {
/* ----->START------ PRINT STYLES  */  
    tooltip.css("opacity", 0);
.print-only { display:none; }
  });
/* ----->END------ PRINT STYLES */
 
  mw.loader.using("mediawiki.api", function () {
    // Only run on form edit page
    if (mw.config.get("wgCanonicalSpecialPageName") === "FormEdit") {
      new mw.Api()
        .post({
          action: "purge",
          titles: "Main",
        })
        .fail(function (err) {
          // Optional: leave a minimal fallback error log
          console.warn("Main page purge failed", err);
        });
    }
  });
});

Latest revision as of 17:32, 2 September 2025

/* ----->START------ FONTS */ @font-face { 

   font-family: 'HALColant-TextRegular';
   src: url('/fonts/HALColant-TextRegular.woff2') format('woff2'),
       url('/fonts/HALColant-TextRegular.woff') format('woff');
   font-weight: normal;
   font-style: normal;

}

  • {
   color: #292828; /* Specific black color */

}

/* Change text color of links on hover */ a:hover { 

   cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="4.5" fill="white" stroke="black" stroke-width="1" /></svg>') 14 14, auto;

}

/* Change text color of links on focus */ a:focus { 

   cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="4.5" fill="white" stroke="black" stroke-width="1" /></svg>') 14 14, auto;

}

html, body { 

   font-family: HALColant-TextRegular!important;
   background: #FAFAFA 0%;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-smoothing: antialiased;
   cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="4.5" fill="black" /></svg>') 14 14, auto;

} html { 

   scrollbar-width: none; /* Firefox */

} body { 

   background: #FAFAFA 0%;
   transition: background-color 1s ease;

}

-webkit-scrollbar {
   display: none;

} pre.mw-code.mw-css { 

   font-family: sans-serif!important;

} /* -----END<------ FONTS */

/* ----->START------ GENERAL RULES FOR MEDIAWIKI SKIN */ /* Page Margins */ .mw-body { 

   padding: 0 !important;
   margin-left: 0 !important;
   border: none;
   background: #FAFAFA 0%;

} .mw-search-profile-tabs { 

   display: none;

} .mw-parser-output { 

   background: #FAFAFA 0%;
   transition: background-color 1s ease;
   /*padding: 25px;*/
   padding: 1.3%;

}

  1. mw-searchoptions {
   display: none;

} /* Hide Mediawiki logo */

  1. p-logo a {
   display: none;

} /* Hide left vertical toolbar */

  1. mw-panel {
   display: none;

} .mw-parser-output a.external { 

   background-image: none;

} .mw-search-result-data { 

   display: none;

} .mw-search-result-heading { 

 font-size: 16pt;
 line-height: 27px;
 letter-spacing: 0.4px;

} .mw-search-results li a { 

 font-size: 16pt!important;
 line-height: 27px;
 letter-spacing: 0.4px;
 color: black;
 text-decoration: underline;

}

  1. mw-indicator-mw-helplink {
 display: none;

} .mw-search-results-container h2 { 

 display: none;

}

  1. mw-content-text .mw-search-results {
 margin-top: 0 !important;

} .mw-search-results li { 

 list-style: none;
 margin-bottom: 0 !important;

} .results-info { 

 display: none;

} .vector-body p { 

 margin-top: 0px!important;
 margin-bottom: 0px!important;

}

  1. firstHeading {
   display: none;

} .mw-footer { 

   display: none;

} a.mw-selflink { 

   font-weight: normal;
   text-decoration: underline;

} a.mw-selflink:hover { 

   font-weight: normal;
   text-decoration: underline;

}

  1. mw-head {
   background-color: #FAFAFA;
   transition: background-color 1s ease;
   display: none;

} .mw-body, #left-navigation, #mw-data-after-content, .mw-footer { 

   margin-left: 0!important;

}

  1. mw-page-base {
   background-color: #FAFAFA;
   transition: background-color 1s ease;
   background-image: none;
   display: none;

}

  1. catlinks {
   display: none;

} /* Don't display 3 vertical lines. This is loading of Mediawiki*/ .mw-indicators { 

   display: none;

} /* Don't display loading load spinner. This is loading of Semantic Mediawiki*/ .smw-overlay-spinner { 

   display: none;

} .mw-content-subtitle, #contentSub, #contentSub2 { 

   display: none;

} /* -----END<------ GENERAL RULES FOR MEDIAWIKI SKIN */

/* ------> STYLING HEADER */ .custom-navbar { 

   display:none;

} .logo p { 

 font-size: 17px;
 line-height: 22px;
 letter-spacing: 0.37px;
 text-align: right;
 text-decoration: underline;
 margin-top: -0.33rem !important;

} div.hf-header { 

   position: fixed;
   top: 0;
   left: 0;
   width: -moz-available; /* For Firefox */
   width: -webkit-fill-available; /* For Chrome and Safari */
   background: transparent linear-gradient(180deg, #FAFAFA 0%, #FFFFFF00 100%) 0% 0% no-repeat padding-box;
   z-index: 9999;
   /*padding: 25px 25px 0 25px;*/
   padding: 1.3%;

} div#hf-nsheader- { 

   position: fixed;
   top: 0;
   left: 0;
   width: -moz-available; /* For Firefox */
   width: -webkit-fill-available; /* For Chrome and Safari */
   background: transparent linear-gradient(180deg, #FAFAFA 0%, #FFFFFF00 100%) 0% 0% no-repeat padding-box;
   z-index: 9999;
   /*padding: 25px 25px 0 25px;*/
   padding: 1.3%;

} div#hf-nsheader-Special { 

   position: fixed;
   top: 0;
   left: 0;
   width: -moz-available; /* For Firefox */
   width: -webkit-fill-available; /* For Chrome and Safari */
   background: transparent linear-gradient(180deg, #FAFAFA 0%, #FFFFFF00 100%) 0% 0% no-repeat padding-box;
   z-index: 9999;
   /*padding: 25px 25px 0 25px;*/
   padding: 1.3%;

}

  1. header-container {
   display: flex;
   flex-wrap: wrap;
   margin: 0 auto;
   /*padding-bottom: 100px;*/

} .head-col { 

   width: calc(20% - 0px);
   box-sizing: border-box;
   height: fit-content;
   padding: 10px;

} .head-links.head-col { 

 width: calc(20% - 3px);

} .head-col-extend { 

   box-sizing: border-box;
   height: fit-content;

} .head-box { 

   border: 1px solid black;
   background: #FAFAFA;
   z-index: 2;
   position: relative;

} .head-box:hover { 

   cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="4.5" fill="white" stroke="black" stroke-width="1" /></svg>') 14 14, auto;

} .head-nav { 

   padding-left: 15px;
   padding-top: 5px;
   line-height: 23px;

} .head-links { 

   padding-top: 5px;

}

/* FILTERS HEADER */ .head-filter.head-col-extend { 

   width: calc(40% + 3px);
   overflow: hidden;

} .container-filter-label-button {

}

.buttons-filters { 

   font-size: 16px;
   line-height: 20px;
   letter-spacing: 0.35px;
   padding-bottom: 5px;
   display: grid;
   grid-template-columns: 1fr 1fr; /* two equal columns */
   align-items: center;
   gap: 10px;

}

.count-filters-container { 

 border-bottom: 1px solid black;
 padding-bottom: 5px;

}

.count-filtered-cards { 

 font-size: 17px;
 line-height: 22px;
 font-style: italic;
 margin-top: 0;
 width: fit-content;

}

.count-filtered-cards span { 

 margin-right: 2px;
 background-color: #EDEDED;
 padding: 1px 3px;

}


.reset-button {

} .reset-button { 

   justify-self: end;

} .open-close-button { 

   justify-self: start;

} .reset-symbol { 

 font-size: 20px;

} .reset-filter { 

   font-family: HALColant-TextRegular !important;
   background: none;
   border: none;
   font-size: 17px;
   line-height: 20px;
   cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="4.5" fill="white" stroke="black" stroke-width="1" /></svg>') 14 14, auto;
   text-transform: uppercase;

} .toggle-filters.general-toggle { 

   font-family: HALColant-TextRegular !important;
   background: none;
   border: none;
   font-size: 17px;
   line-height: 20px;
   cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="4.5" fill="white" stroke="black" stroke-width="1" /></svg>') 14 14, auto;
   text-transform: uppercase;
   padding-left: 0!important;

} .toggle-filters.open-filter { 

   font-family: HALColant-TextRegular !important;
   position: absolute;
   background: none;
   font-weight: normal;
   text-transform: uppercase;
   letter-spacing: 0px;
   border: none;
   padding: 5px 0;
   cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="4.5" fill="white" stroke="black" stroke-width="1" /></svg>') 14 14, auto;
   text-decoration: underline;
   font-size: 17px;
   line-height: 22px;
   letter-spacing: 0.95px;

} .toggle-filters.open-filter:hover { 

   font-style: italic;

} .filter-button { 

   font-family: HALColant-TextRegular !important;
   padding: 0 !important;
   white-space: nowrap;
   background: rgb(237,237,237);
   margin-bottom: 5px;
   border: none;
   cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="4.5" fill="white" stroke="black" stroke-width="1" /></svg>') 14 14, auto;
   font-size: 19px;
   line-height: 26px;
   letter-spacing: 0.95px;

} .filter-button:hover { 

   font-style: italic;

} .values { 

   display: none; /* Keep the filter values hidden initially */
   padding-top: 30px;

} button.active { 

   text-decoration: underline;

}

  1. filters {
   display: none; /* Hidden initially, will be shown on button click */
   width: 100%; /* Full width of the parent container */
   grid-template-columns: repeat(4, 1fr); /* Creates four columns with equal width */
   gap: 5px; /* Space between grid items */
   box-sizing: border-box;
   opacity: 0;
   transition: opacity 0.5s ease, height 0.5s ease;
   height: 0;
   overflow: hidden;
   background: transparent linear-gradient(180deg,#FAFAFA 0%,#FFFFFF00 100%) 0% 0% no-repeat padding-box;

} @media screen and (max-width: 1366px) { 

   .toggle-filters.open-filter {
       font-size: 15px;
       line-height: 24px;
       letter-spacing: 0.95px;
   }

   .filter-button {
       font-size: 16px;
       line-height: 24px;
       letter-spacing: 0.95px;
   }

   #filters {
       grid-template-columns: 0.65fr 0.8fr 1fr 1fr; 
   }

}

  1. filters.is-visible {
   display:grid;
   opacity: 1;
   height: auto; /* Adjust to the natural height of the content */

} .filter { 

   white-space: normal;
   overflow-wrap: break-word;

} .filter-label { 

   font-size: 17px;
   line-height: 22px;
   letter-spacing: 0.37px;

}

.header-entry-number { 

   font-size: 17px;
   line-height: 24px;
   letter-spacing: 0.37px;
   padding-bottom: 5px;
   float: left;

} .header-authors { 

   font-size: 19px;
   line-height: 26px;
   letter-spacing: 0.95px;
   padding-left: 5em;

} .header-title { 

   border-top: 1px solid black;
   font-size: 19px;
   line-height: 26px;
   letter-spacing: 0.95px;
   padding: 4px 0;

} .header-authors a { 

   color: black;
   text-decoration: none;

} .header-authors a:hover { 

   font-style: italic;

} .header-title a { 

   color: black;
   text-decoration: none;

} .header-title a:hover { 

   font-style: italic;

} .header-type { 

   border-top: 1px solid black;
   font-size: 19px;
   line-height: 23px;
   letter-spacing: 0.95px;
   padding-top: 4px;

} .header-index { 

   font-size: 17px;
   line-height: 22px;
   letter-spacing: 0.37px;

} .header-index a { 

   color: black;

} .header-index a:hover { 

   color: black;

} .header-people { 

   font-size: 17px;
   line-height: 22px;
   letter-spacing: 0.37px;

} .header-people a{ 

   color: black!important;

} .header-people a:hover{ 

   color: black;

} .header-community { 

   font-size: 17px;
   line-height: 22px;
   letter-spacing: 0.37px;

} .header-community a { 

   color: black!important;

} .header-community a:hover{ 

   color: black;

} .header-date { 

   color: #4D4D4D;
   font-size: 17px;
   line-height: 22px;
   letter-spacing: 0.37px;

} .header-about { 

   font-size: 17px;
   line-height: 22px;
   letter-spacing: 0.37px;

} .header-about a { 

   color: black!important;

} .header-about a:hover{ 

   color: black;

} .about-hide { 

   opacity: 0; /* Make it invisible initially */
   visibility: hidden; /* Ensure it's not interactable */
   display: none;
   color: black;
   font-size: 28px;
   line-height: 34px;
   letter-spacing: 1.4px;
   width: 200%;
   border-bottom: 1px solid black;
   padding-bottom: 5px;
   padding-top: 5px;
   transition: opacity 0.8s ease, visibility 0.8s;

} .header-about:hover + .about-hide { 

   display: block;
   opacity: 1; /* Make it fully visible on hover */
   visibility: visible; /* Make it interactable */

}

  1. about-container {
   display: flex;
   flex-wrap: wrap;
   margin: 0 auto;
   padding-bottom: 12%;
   top: 420px;
   position: relative;
   width: 100%;

} .about-col { 

   width: calc(40% - 0px);
   box-sizing: border-box;
   height: fit-content;
   padding: 0 0 0 0;
   margin-bottom: 30px;
   margin-right: 15px;

} .about-details-col { 

   width: calc(18% - 0px);
   box-sizing: border-box;
   height: fit-content;
   margin-bottom: 30px;
   font-size: 10pt;
   line-height: 16px;
   letter-spacing: 0.4px;
   border-bottom: 1px solid black;

} .about-details-label { 

   border-top: 1px solid black;
   padding-top: 5px;
   margin-bottom: 0 !important;
   text-indent: 35px;

} .about-details-text { 

   margin: 3px 0 !important;

} .about-main-text { 

   text-indent: 35px;
   font-size: 23px;
   line-height: 31px;
   letter-spacing: 1.29px;
   margin-top: 0 !important;

} .about-bullets { 

   text-indent: 35px;
   padding-left: 35px;

} .about-more-text { 

   text-indent: 35px;
   font-size: 23px;
   line-height: 31px;
   letter-spacing: 1.29px;
   margin-top: 0 !important;

} .about-label { 

   font-size: 15px;
   line-height: 19px;
   letter-spacing: 0.48px;
   border-top: none!important;
   text-indent: 35px;
   margin-bottom: 0 !important;

} .about-details-contact-label { 

   font-size: 15px;
   line-height: 19px;
   letter-spacing: 0.48px;
   border-top: none!important;
   text-indent: 35px;
   margin-bottom: 0 !important;

} .about-details-contact { 

   font-size: 15px;
   line-height: 18px;
   text-indent: 35px;
   letter-spacing: 0.84px;
   margin-top: 0 !important;

} /* -----END<------ STYLING HEADER */


img { 

   border: 0;
   width: 50px;
   height: auto;

}

.home-block-view { 

   display: none;
   position: relative;
   top: 440px;
   width: -moz-available!important;
   width: -webkit-fill-available!important;

} .home-list-view { 

   display: none;
   position: relative;
   top: 440px;

}

/* ----->START------ BUTTONS IN HOME LIST BLOCK CHRONICLE RANDOM ALPHABETICAL */

.active-view-button button { 

   text-decoration: underline;

}

/* Block and List View Buttons */ .view-container-buttons { 

   display: flex;
   justify-content: space-between; /* This puts one group on the left, and the other on the right */
   position: relative;
   top: 420px;

} .view-buttons, .order-buttons { 

   display: flex; 
   justify-content: left;

} .home-view-buttons, .home-order-buttons { 

   display: flex; 
   justify-content: left;
   position: relative;
   z-index: 1000;

} .view-buttons, .order-buttons { 

   display: flex; 
   justify-content: left;
   position: relative;
   z-index: 1000;

} .home-list-sorting-buttons, .home-block-sorting-buttons { 

   position: absolute; 
   top: 0;
   left: 0;
   width: 100%;
   display: flex; 
   justify-content: flex-end;

} .list-sorting-buttons, .block-sorting-buttons { 

   position: absolute; 
   top: 0;
   left: 0;
   width: 100%;
   display: flex; 
   justify-content: flex-end;

} .home-list-sorting-buttons { 

   display: none; /* Initially hide the sorting buttons */

} .block-sorting-buttons { 

   display: none; /* Initially hide the sorting buttons */

} .list-view-button, .block-view-button, .chronicle-button, .random-button, .alphabetical-button, .chronicle-list-button, .random-list-button, .alphabetical-list-button, .chronicle-block-button, .random-block-button, .alphabetical-block-button, .home-list-view-button, .home-block-view-button, .home-chronicle-list-button, .home-random-list-button, .home-alphabetical-list-button, .home-chronicle-block-button, .home-random-block-button, .home-alphabetical-block-button { 

   font-size: 19px;
   line-height: 26px;
   letter-spacing: 0.95px;
   padding-inline: 2px;
   display: inline-block;

} .home-list-view-button button:hover, .home-block-view-button button:hover, .home-chronicle-block-button button:hover, .home-chronicle-list-button button:hover, .home-random-block-button button:hover, .home-random-list-button button:hover, .home-alphabetical-block-button button:hover, .home-alphabetical-list-button button:hover{ 

 text-decoration: underline;
 cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="4.5" fill="white" stroke="black" stroke-width="1" /></svg>') 14 14, auto;

} .home-list-view-button button:focus, .home-block-view-button button:focus, .home-chronicle-block-button button:focus, .home-chronicle-list-button button:focus, .home-random-block-button button:focus, .home-random-list-button button:focus, .home-alphabetical-block-button button:focus, .home-alphabetical-list-button button:focus{ 

 text-decoration: underline;
 cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="4.5" fill="white" stroke="black" stroke-width="1" /></svg>') 14 14, auto;

} .list-view-button button, .block-view-button button, .chronicle-button button, .random-button button, .alphabetical-button button, .chronicle-list-button button, .random-list-button button, .alphabetical-list-button button, .chronicle-block-button button, .random-block-button button, .alphabetical-block-button button, .home-list-view-button button, .home-block-view-button button, .home-chronicle-list-button button, .home-random-list-button button, .home-alphabetical-list-button button, .home-chronicle-block-button button, .home-random-block-button button, .home-alphabetical-block-button button{ 

   background: transparent;
   border: none;
   font-family: HALColant-TextRegular!important;
   font-size: 19px;
   line-height: 26px;
   letter-spacing: 0.4px;
   padding-inline: 5px;

}

/* -----END<------ BUTTONS IN HOME LIST BLOCK CHRONICLE RANDOM ALPHABETICAL */

/* ----->START------ LIST AND BLOCK VIEW */

/* BLOCK VIEW */ .home-chronicle-block div.list-container { 

   display: flex;
   flex-wrap: wrap;
   margin: 0 auto;
   padding-left: 1px;

} /* Card for BLOCK view */ .home-chronicle-block div.list-container div.card { 

 position: relative;
 width: calc(20% - 0px);
 box-sizing: border-box;
 border: 1px solid black;
 height: fit-content;
 padding: 5px 10px;
 margin-bottom: 30px;
 font-size: 17px;
 line-height: 24px;
 letter-spacing: 0.9px;
 cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="24" font-family="Arial" fill="black">⤢</text></svg>') 16 16, auto;

} .home-chronicle-block div.list-container div.card:hover { 

   background: #f3f3f3;

} .home-chronicle-list div.list-container div.card:hover { 

   background: #f3f3f3;

} .home-chronicle-block div.list-container div.event:hover { 

 background: black;
 color: white !important;
 cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="4.5" fill="white" stroke="black" stroke-width="1" /></svg>') 14 14, auto;

}

.home-chronicle-block div.list-container div.event:hover .entry-number, .home-chronicle-block div.list-container div.event:hover .event-link, .home-chronicle-block div.list-container div.event:hover .title, .home-chronicle-block div.list-container div.event:hover .container-people-date .people a, .home-chronicle-block div.list-container div.event:hover .container-people-date .date, .home-chronicle-block div.list-container div.event:hover .type a { 

 color: white !important;

}

.home-chronicle-list div.list-container div.event:hover { 

 background: black;
 color: white !important;
 cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="4.5" fill="white" stroke="black" stroke-width="1" /></svg>') 14 14, auto;

}

.home-chronicle-list div.list-container div.event:hover .entry-number, .home-chronicle-list div.list-container div.event:hover .event-link, .home-chronicle-list div.list-container div.event:hover .title, .home-chronicle-list div.list-container div.event:hover .container-people-date .people a, .home-chronicle-list div.list-container div.event:hover .container-people-date .date, .home-chronicle-list div.list-container div.event:hover .type a { 

 color: white !important;

}

.home-chronicle-block div.list-container div.event div.entry-number { 

   z-index: 100000;

} .home-chronicle-block div.list-container div.event div.entry-number:hover { 

   color: white;

} .home-chronicle-block div.list-container div.card:not(:first-child) { 

   margin-left: -1px;
   border-left: 1px solid black;

} .home-chronicle-block div.list-container div.card:nth-child(5n + 1) { 

   transform: none;
   width: calc(20% - 0px);

} .home-chronicle-block div.list-container div.card:last-child { 

   margin-right: 0;
   border-right: 1px solid black;

}

/* Contents of Card for BLOCK view */ .home-chronicle-block div.list-container div.card div.images { 

   border-top: 1px solid black;
   padding-top: 5px;
   padding-bottom: 5px;
   display: flex; 
   flex-wrap: nowrap;

} .home-chronicle-block div.list-container div.card div.image1, .home-chronicle-block div.list-container div.card div.image2 { 

   margin-right: 10px; 
   transition: transform 0.3s ease;
   transform-origin: top left;

} .home-chronicle-block div.list-container div.card div.image1 img, .home-chronicle-block div.list-container div.card div.image2 img{ 

   display: block;
   width: auto;
   height: 75px;

}

.home-chronicle-block div.list-container div.card div.image1:hover, .home-chronicle-block div.list-container div.card div.image2:hover { 

   transform: scale(2); 
   position: relative;
   z-index: 900000;

}

.home-chronicle-block div.list-container div.card div.image3, .home-chronicle-block div.list-container div.card div.image4, .home-chronicle-block div.list-container div.card div.image5 { 

   display: none;

} .home-chronicle-block div.list-container div.card div.image3 img, .home-chronicle-block div.list-container div.card div.image4 img, .home-chronicle-block div.list-container div.card div.image5 img { 

   display: none;

}

.home-chronicle-block div.list-container div.card div.entry-number { 

 padding-bottom: 3px;
 float: left;

} .title a { 

 color: black !important;
 pointer-events: none;
 cursor: default;

}

.home-chronicle-block div.list-container div.card div.event-link { 

   text-decoration: underline;
   font-size: 16px;
   line-height: 26px;
   float: right;
   margin-top: -2px;
   font-family: Arial, sans-serif;
   text-underline-offset: 3px;

}

.home-chronicle-block div.list-container div.card.event .title { 

 font-size: 23px;
 line-height: 26px;
 font-style: italic;
 text-align: left;
 letter-spacing: 0.9px;
 padding: 6px 6px 6px 0;
 border-top: 1px solid black

} .home-chronicle-list div.list-container div.card.event div.title { 

 font-size: 17px;
 line-height: 24px;
 letter-spacing: 0.9px;
 text-align: left;
 width: calc(60% - 0px);
 max-width: 40%;

} .home-chronicle-list div.list-container div.card.event .container-people-date { 

 display: flex;
 width: calc(20% - 0px);
 padding-right: 50px;

} .home-chronicle-list div.list-container div.card.event div.people { 

 width: auto;
 flex: 1;

} .home-chronicle-list div.list-container div.card.event div.date { 

   width: auto;
   flex: 1;
   text-align: center;
   width: calc(10% - 0px);
   white-space: nowrap;
   position: absolute;
   left: 80%;

} .home-chronicle-list div.list-container div.card.event div.date:hover { 

   color: #fff !important;

} .home-chronicle-block div.list-container div.event:hover .date, .home-chronicle-list div.list-container div.event:hover .date { 

 color: #fff !important;

} .home-chronicle-block div.list-container div.card.event div.container-people-date { 

   display: flex; /* Enables flexbox layout mode */
   justify-content: space-between;
   border-top: 1px solid black;

} .home-chronicle-block div.list-container div.card.event div.people { 

   padding-left: 0!important;

}

.home-chronicle-block div.list-container div.card div.container-people-date .people { 

 flex: 1; 
 text-align: left;
 border: none!important;
 line-height: 23px !important;
 padding-top: 6px;

} .home-chronicle-block div.list-container div.card div.container-people-date .date { 

 flex: 1; 
 text-align: right;
 line-height: 23px !important;
 padding-top: 6px;

}

.home-chronicle-block div.list-container div.card div.people { 

 line-height: 23px!important;
 padding-top: 2px;
 padding-left: 5em;

} .home-chronicle-block div.list-container div.card div.people a { 

   color: black;
   text-decoration: underline;

} .home-chronicle-block div.list-container div.card div.people a:hover { 

   font-style: italic;
   color: black;

}

.home-chronicle-block div.list-container div.card div.title { 

 font-size: 23px;
 padding: 6px 0;
 border-top: 1px solid black;

}

.home-chronicle-block div.list-container div.card div.type { 

   border-top: 1px solid black;
   padding-top: 5px;

} .home-chronicle-block div.list-container div.card div.type a { 

   color: black;
   text-decoration: none;

} .home-chronicle-block div.list-container div.card div.type a:hover { 

   font-style: italic;
   color: black;

} .home-chronicle-block div.list-container div.card.event div.type a:hover {

} /* Card for LIST view */ .home-chronicle-list div.list-container { 

   width: 100%; /* For Chrome and other browsers */
   padding-bottom: 80px;

} .home-chronicle-list div.list-container div.card { 

 width: -moz-available!important;
 width: -webkit-fill-available!important;
 width: 100%;
 margin-bottom: 0;
 border-left: 1px solid black;
 border-right: 1px solid black;
 border-bottom: none;
 border-top: 1px solid black;
 cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="24" font-family="Arial" fill="black">⤢</text></svg>') 16 16, auto;
 display: flex;
 align-items: flex-start;
 justify-content: start;
 font-size: 17px;
 line-height: 24px;
 letter-spacing: 0.9px;
 transition-delay: .001s;
 padding: 5px 10px;

} .home-chronicle-list div.list-container div.card:not(:first-child) { 

   margin-left: 0;
   border-left: 1px solid black;

} .home-chronicle-list div.list-container div.card:nth-child(5n + 1) { 

   margin-left: 0;
   transform: none;

} /* .home-chronicle-list div.list-container div.card:last-child { 

   margin-right: 0;
   border-bottom: 1px solid black;

} */ .home-chronicle-list div.list-container div.card.last-visible { 

   margin-right: 0;
   border-bottom: 1px solid black;

}

/* Contents of Card for LIST view */ .home-chronicle-list div.list-container div.card div.entry-number { 

   width: calc(10% - 0px);

} .home-chronicle-list div.list-container div.event div.entry-number { 

   width: calc(3.5% + 5px);

} .home-chronicle-list div.list-container div.event div.event-link { 

   width: calc(6.2% - 0px);
   text-decoration: underline;
   font-size: 16px;
   line-height: 24px;
   float: right;
   margin-top: -3.4px;
   font-family: Arial, sans-serif;
   text-underline-offset: 3px;

} .home-chronicle-list div.list-container div.card div.people { 

   width: calc(20% - 0px);
   border: none;
   padding-right: 50px;

} .home-chronicle-list div.list-container div.card div.people a { 

   text-decoration: underline;
   color: black;

} .home-chronicle-list div.list-container div.card.event div.people a {

} .home-chronicle-list div.list-container div.card div.people a:hover { 

   font-style: italic;

} .home-chronicle-list div.list-container div.card div.title-images { 

   display: flex;
   width: calc(60% - 0px);
   max-width: 50%;

} .home-chronicle-list div.list-container div.card div.images { 

   display: flex;
   border: none;
   padding-top: 0;
   padding-bottom: 0;

}

.home-chronicle-list div.list-container div.card div.image1 img, .home-chronicle-list div.list-container div.card div.image2 img{ 

   display: block;
   max-width: 100%;
   width: auto;
   height: 25px;

} .home-chronicle-list div.list-container div.card div.image1, .home-chronicle-list div.list-container div.card div.image2 { 

   margin-right: 10px;
   transition: transform 0.3s ease;
   transform-origin: top left;

} .home-chronicle-list div.list-container div.card div.image3, .home-chronicle-list div.list-container div.card div.image4, .home-chronicle-list div.list-container div.card div.image5 { 

   display: none;

} .home-chronicle-list div.list-container div.card div.type { 

   width: calc(10% - 0px);
   border: none;
   white-space: nowrap;
   position: absolute;
   left: 90%;

} .home-chronicle-list div.list-container div.card.event div.type a {

} .home-chronicle-list div.list-container div.card div.type a { 

   color: black;
   text-decoration: none;

} .home-chronicle-list div.list-container div.card div.type a:hover { 

   font-style: italic;

} .home-chronicle-list div.list-container div.card div.title { 

   max-width: 50%;

} .home-chronicle-list div.list-container div.card div.image1:hover, .home-chronicle-list div.list-container div.card div.image2:hover { 

   transform: scale(6);

}

.card.event + .card.event { 

   border-left: none;

} /* -----END<------ LIST AND BLOCK VIEW */

/* ----->START------ POP UP ARTICLE */

  1. list {
   width: 100%!important;

}

  1. show-article-wrapper-entry {
   display: block;
   position: fixed; /* Change to fixed */
   top: 0;
   /*right: 24px;*/
   right: 1.3%;
   width: 41%;
   height: 100vh; /* Set to full viewport height */
   overflow: auto; /* Enables scrolling if content overflows */
   scrollbar-width: none; /* Firefox */
   -ms-overflow-style: none;  /* Internet Explorer 10+ */
   z-index: 9999; /* Ensure it's above #list */
   /*padding-left: 100px;*/
   margin-top: 50px;

}

  1. show-article-wrapper-entry #show-article {
   padding-bottom: 50px;

} /* Hides scrollbar for Webkit browsers */

  1. show-article-wrapper-entry::-webkit-scrollbar {
   display: none;

}

  1. show-article-wrapper {
   display: none;
   position: fixed; /* Change to fixed */
   top: 5%;
   /*right: 24px;*/
   right: 1.3%;
   width: 41%;
   height: 100vh; /* Set to full viewport height */
   overflow: auto; /* Enables scrolling if content overflows */
   scrollbar-width: none; /* Firefox */
   -ms-overflow-style: none;  /* Internet Explorer 10+ */
   z-index: 9999; /* Ensure it's above #list */
   /*padding-left: 100px;*/

} /* Hides scrollbar for Webkit browsers */

  1. show-article-wrapper::-webkit-scrollbar {
   display: none;

}

  1. show-article {
   background-color: #FAFAFA;
   border: 1px solid;
   padding: 0px 10px 0 10px;
   position: relative;
   top: 40px;
   /*margin-left: 36px;*/
   margin-left: 4.6%;

}

  1. show-article-before {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: #FAFAFA;
   border: 1px solid #080808;
   transition: all 0.3s ease;
   opacity: 0; /* Initially hidden */
   z-index: -1; /* Ensures it's under the main content */

}

  1. show-article:hover #show-article-before {
   opacity: 1; 
       scrollbar-width: none; /* Firefox */
   -ms-overflow-style: none;  /* Internet Explorer 10+ */

} /* Hides scrollbar for Webkit browsers */

  1. show-article::-webkit-scrollbar {
   display: none;

}

.article-metadata { 

   display: flex;
   border-bottom: 1px solid black;
   padding: 5px 0 5px 0;

} .article-metadata-label { 

   text-transform: uppercase;
   margin-bottom: 0 !important;
   margin-top: 5px!important;
   font-size: 15px;
   line-height: 23px;
   letter-spacing: 0.48px;

} .article-metadata-value { 

   text-transform: capitalize;
   font-size: 19px;
   line-height: 23px;
   letter-spacing: 0.6px;
   margin-top: 0 !important;
   margin-bottom: 7px !important;

} .article-metadata-value a { 

 color: black !important;

}

.article-metadata-column:not(:first-child) { 

   margin-left: 20px;

}

.article-metadata-column:nth-child(n+2) { 

   margin-left: 10%;

} .article-label-description { 

   text-transform: uppercase;
   text-indent: 35px;
   padding-top: 5px;
   font-size: 15px;
   line-height: 23px;
   letter-spacing: 0.48px;

} .article-label-image { 

   text-transform: uppercase;
   text-indent: 35px;
   font-size: 15px;
   line-height: 23px;
   letter-spacing: 0.48px;
   padding-top: 5px;

} .article-label-reflection { 

   text-transform: uppercase;
   text-indent: 35px;
   padding-top: 5px;
   font-size: 15px;
   line-height: 23px;
   letter-spacing: 0.48px;

} .article-label-quote { 

   text-transform: uppercase;
   text-indent: 35px;
   font-size: 15px;
   line-height: 23px;
   letter-spacing: 0.48px;
   padding-top: 5px;

} .article-label-modification-date { 

   text-transform: uppercase;
   padding-top: 5px;
   text-indent: 35px;
   color: grey;
   display: inline-block;
   font-size: 15px;
   line-height: 23px;
   letter-spacing: 0.48px;

} .article-entry-number { 

   border-bottom: 1px solid black;
   font-size: 19px;
   line-height: 23px;
   letter-spacing: 0px;
   padding-bottom: 5px;
   padding-top: 7px;

} .article-people { 

   font-size: 25px;
   line-height: 30px;
   letter-spacing: 1.4px;
   text-decoration: underline;
   text-align: center;
   padding-top: 25px;
   margin-bottom: 5px!important;

} .article-people a { 

   color: black;
   text-decoration: underline;

} .article-people a:hover { 

   font-style: italic;
   color: black;

} .article-title-link { 

   border-bottom: 1px solid black;
   padding-bottom: 10px;
   display: flex; /* Use flexbox */
   flex-direction: column; /* Stack items vertically */
   align-items: center; /* Align items horizontally in the center */
   justify-content: center; /* Align items vertically in the center */
   text-align: center; /* Center the text */

} .article-title { 

   font-size: 25px;
   line-height: 30px;
   letter-spacing: 1.4px;
   text-align: center;
   margin-bottom: 0!important;
   margin-top: 0 !important;
   max-width: 70%;

} .article-title a{ 

   color: black!important;
   font-size: 25px;
   line-height: 30px;
   letter-spacing: 1.4px;
   text-align: center;
   margin-bottom: 0!important;
   margin-top: 0 !important;
   max-width: 70%;

} .article-type { 

   font-size: 19px;
   line-height: 23px;
   letter-spacing: 0.4px;
   border-bottom: 1px solid black;
   margin-top: 0 !important;
   margin-bottom: 0 !important;
   padding: 5px 0 5px 0;

} .article-type a { 

   color: black;
   text-decoration: none;

} .article-type a:hover { 

   font-style: italic;
   color: black;

} .article-entity { 

   font-size: 12pt;
   line-height: 25px;
   letter-spacing: 0.4px;
   margin-top: 0 !important;

} .article-discipline { 

   font-size: 12pt;
   line-height: 25px;
   letter-spacing: 0.4px;
   margin-top: 0 !important;

} .article-subject { 

   font-size: 12pt;
   line-height: 25px;
   letter-spacing: 0.4px;
   margin-top: 0 !important;

} .article-images { 

   border-bottom: 1px solid black;
   padding-bottom: 7px;

} .article-image { 

   position: relative;

} .external-link-icon { 

   display: flex; /* Use flexbox */
   align-items: center; /* Align items vertically in the center */
   justify-content: center; /* Center the content horizontally */
   width: 20px; /* Adjust the width as needed */
   height: 20px; /* Adjust the height as needed */
   font-size: 17px;
   line-height: 22px;
   letter-spacing: 0.48px;
   color: black !important;
   text-decoration: none;

} .external-link-icon a { 

   font-size: 17px;
   line-height: 22px;
   letter-spacing: 0.48px;
   color: black !important;
   text-decoration: none;

} .external-link-icon a:hover { 

   text-decoration: underline;

} p.pdf-link-icon { 

 margin-right: 10px;

} .text-symbol { 

   color: black; /* Ensure the symbol is black */
   font-size: 15px;

}

.pdf-link-icon { 

 font-size: 17px;
 line-height: 22px;
 letter-spacing: 0.48px;
 color: black !important;
 margin-right: 25px;
 margin-left: -20px;

} .pdf-link-icon a { 

 font-size: 17px;
 line-height: 22px;
 letter-spacing: 0.48px;
 color: black !important;

} .link-pdf { 

   display: flex;
   margin-top: 5px;
   align-items: center;

}

.image-container { 

   position: relative;
   display: inline-block;

}

.image-container img { 

   display: block;
   max-width: 100%; 
   width: auto;
   height: 400px; 
   padding-bottom: 3px;

}

.arrows-and-image { 

   position: relative;
   width: fit-content;

}

.image-navigation { 

   position: relative;
   display: inline-block;

} .image-navigation:hover .prev-arrow, .image-navigation:hover .next-arrow { 

   display: block;

}


.image-navigation:hover .caption-image1, .image-navigation:hover .caption-image2, .image-navigation:hover .caption-image3, .image-navigation:hover .caption-image4, .image-navigation:hover .caption-image5, .image-navigation:hover .related-article-caption-image1, .image-navigation:hover .related-article-caption-image2, .image-navigation:hover .related-article-caption-image3, .image-navigation:hover .related-article-caption-image4, .image-navigation:hover .related-article-caption-image5 { 

   display: block;

}

.prev-arrow, .next-arrow { 

   position: absolute;
   top: 53%;
   transform: translateY(-53%);
   cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="4.5" fill="white" stroke="black" stroke-width="1" /></svg>') 14 14, auto;
   user-select: none;
   font-size: 40px;
   color: white; /* Adjust color as needed */
   display: none; /* Hide arrows initially */
   z-index: 10;

}

.prev-arrow { 

   left: 10px;

}

.next-arrow { 

   right: 10px;

} .caption-line { 

 display: contents;
 font-size: 15px;
 line-height: 18px;
 letter-spacing: .48px;

} .caption-image1, .caption-image2, .caption-image3, .caption-image4, .caption-image5, .related-article-caption-image1, .related-article-caption-image2, .related-article-caption-image3, .related-article-caption-image4, .related-article-caption-image5 { 

   display: none;
   caption-side: bottom;
   font-size: 15px;
   line-height: 18px;
   letter-spacing: 0.48px;

} .article-book { 

   text-transform: capitalize;
   font-size: 19px;
   line-height: 23px;
   letter-spacing: 0.6px;
   margin-top: 0 !important;
   margin-bottom: 7px !important;

} .article-web { 

   text-transform: capitalize;
   font-size: 19px;
   line-height: 23px;
   letter-spacing: 0.6px;
   margin-top: 0 !important;
   margin-bottom: 7px !important;
   border-bottom: 1px solid black;

} .article-year { 

   text-transform: capitalize;
   font-size: 19px;
   line-height: 23px;
   letter-spacing: 0.6px;
   margin-top: 0 !important;
   margin-bottom: 7px !important;
   border-bottom: 1px solid black;

} .article-has-url { 

   text-transform: capitalize;
   font-size: 19px;
   line-height: 23px;
   letter-spacing: 0.6px;
   margin-top: 0 !important;
   margin-bottom: 7px !important;
   border-bottom: 1px solid black;

} .article-has-pdf { 

   text-transform: capitalize;
   font-size: 19px;
   line-height: 23px;
   letter-spacing: 0.6px;
   margin-top: 0 !important;
   margin-bottom: 7px !important;
   border-bottom: 1px solid black;

} .article-internal-ref { 

   text-transform: capitalize;
   font-size: 19px;
   line-height: 23px;
   letter-spacing: 0.6px;
   margin-top: 0 !important;
   margin-bottom: 7px !important;
   border-bottom: 1px solid black;

} .article-external-ref { 

   font-size: 19px;
   line-height: 23px;
   letter-spacing: 0.6px;
   margin-top: 0 !important;
   margin-bottom: 7px !important;
   border-bottom: 1px solid black;

} .article-external-reference { 

   font-size: 19px;
   line-height: 23px;
   letter-spacing: 0.6px;
   margin-top: 0 !important;
   margin-bottom: 7px !important;
   border-bottom: 1px solid black;
   text-indent: 35px;
   padding-bottom: 5px;

} .article-label-external-reference { 

 text-transform: uppercase;
 text-indent: 35px;
 padding-top: 5px;
 font-size: 15px;
 line-height: 23px;
 letter-spacing: 0.48px;

} .article-external-ref a { 

 padding-right: 0px !important;
 color: black !important;

} .article-external-reference a { 

   padding-right: 0px !important;
   color: black !important;

} .article-format-participation { 

   text-transform: capitalize;
   font-size: 19px;
   line-height: 23px;
   letter-spacing: 0.6px;
   margin-top: 0 !important;
   margin-bottom: 7px !important;
   border-bottom: 1px solid black;

} .article-setting { 

   text-transform: capitalize;
   font-size: 19px;
   line-height: 23px;
   letter-spacing: 0.6px;
   margin-top: 0 !important;
   margin-bottom: 7px !important;
   border-bottom: 1px solid black;

} .article-notes { 

   font-size: 23px;
   line-height: 31px;
   letter-spacing: 1.29px;
   text-align: left;
   text-indent: 35px;
   border-bottom: 1px solid black;

} .image-container:hover .caption-image1, .image-container:hover .caption-image2, .image-container:hover .caption-image3, .image-container:hover .caption-image4, .image-container:hover .caption-image5 { 

   display: block;

}

.image-container:hover .related-article-caption-image1, .image-container:hover .related-article-caption-image2, .image-container:hover .related-article-caption-image3, .image-container:hover .related-article-caption-image4, .image-container:hover .related-article-caption-image5 { 

   display: block;

}

.article-description { 

   font-size: 23px;
   line-height: 31px;
   letter-spacing: 1.29px;
   text-align: left;
   text-indent: 35px;
   border-bottom: 1px solid black;

} .article-reflection { 

   font-size: 23px;
   line-height: 31px;
   letter-spacing: 1.29px;
   text-align: left;
   text-indent: 35px;
   margin-top: 0 !important;
   border-bottom: 1px solid black;
   padding-bottom: 5px;

} .article-quote { 

   font-size: 30px;
   line-height: 31px;
   letter-spacing: 1.5px;
   font-style: italic;
   text-align: left;
   text-indent: 35px;
   margin-top: 0 !important;
   border-bottom: 1px solid black;
   padding-bottom: 5px;

}

.article-modification-date { 

   color: grey;
   text-align: left;
   text-indent: 10px;
   margin-top: 0 !important;
   display: inline-block;
   padding-bottom: 5px;
   font-size: 15px;
   line-height: 23px;
   letter-spacing: 0.48px;

}

  1. related-articles {
   margin-top: 0px;
   /*margin-left: 36px;*/
   margin-left: 4.6%;
   padding-bottom: 80px;
   padding-top: 100px;

} .related-articles-label { 

   text-transform: uppercase;
   margin-bottom: 0 !important;
   text-indent: 35px;

} .related-articles-container { 

   display: flex;
   flex-wrap: wrap;
   gap: 0; /* No gap between articles */

} .related-article { 

   width: calc(50% - 0px); /* Adjusted width */
   box-sizing: border-box;
   border: 1px solid black;
   height: fit-content;
   padding: 3px 10px 6px 10px;
   margin-bottom: 30px;
   font-size: 19px;
   line-height: 26px;
   letter-spacing: 0.95px;
   cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="4.5" fill="white" stroke="black" stroke-width="1" /></svg>') 14 14, auto;
   background-color: #FAFAFA;

}

.related-article:not(:first-child) { 

   margin-left: -1px;

}

.related-article:nth-child(2n + 1) { 

   margin-left: 0;

}

.related-article:last-child { 

   margin-right: 0;

} .related-article-entry-number { 

   padding-bottom: 3px;

} .related-article-people { 

   text-decoration: underline;
   border-top: 1px solid black;
   line-height: 23px!important;
   padding-top: 6px;

} .related-article-people a { 

   color: black;
   text-decoration: underline;

} .related-article a:hover { 

   font-style: italic;
   color: black;

} .related-article-title {

} .related-article-type { 

   border-top: 1px solid black;

}

.related-article-type a { 

   color: black;
   text-decoration: none;

} .related-article-type a:hover { 

   font-style: italic;
   color: black;

}

  1. close-button {
   float: right; 
   cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="4.5" fill="white" stroke="black" stroke-width="1" /></svg>') 14 14, auto; 
   font-size: 20px;
   line-height: 24px;
   letter-spacing: 0px;

   position: absolute;   /* override float for precise placement */
   top: 8px;
   right: 8px;

}

/* print button next to [close] */

  1. print-button {
 position: absolute;
 top: 8px;
 right: 60px;          
 line-height: 24px;
 font-size: 20px;
 letter-spacing: 0;
 cursor: pointer;
 z-index: 10;
 padding-right: 8px;

}

  1. print-button a {
 color: black;
 text-decoration: none;

}

  1. print-button a:hover {
 text-decoration: underline;

}

.entryPage-printBtn { 

 right: 0 !important;

}

  1. print-chooser {
 position: absolute;
 top: 36px;              
 right: 8px;             
 display: none;          
 white-space: nowrap;    
 font-size: 14px;
 line-height: 20px;

}

/* Links styled like pills (MW-safe) */

  1. print-chooser .print-choice {
 display: inline-block;
 padding: 2px 4px;
 text-decoration: none;
 background: #ececec;
 color: #767676;
 margin-top: 2px;

}

  1. print-chooser .print-choice + .print-choice { margin-left: 6px; }
  1. print-chooser .print-choice:hover,
  2. print-chooser .print-choice:focus {
 text-decoration: none;
 color: black;

}

.fade-out { 

   position: absolute;
   width: 100%;
   height: 100%;
   background: #FAFAFA;
   opacity: 0.4;
   z-index: 999;

}

/* -----END<------ POP UP ARTICLE */


/* ----->START------ EVENT HOMEPAGE */

  1. show-event-wrapper {
   display: block;
   position: fixed; /* Change to fixed */
   top: 0;
   /*right: 24px;*/
   right: 1.3%;
   width: 41%;
   height: 100vh; /* Set to full viewport height */
   overflow: auto; /* Enables scrolling if content overflows */
   scrollbar-width: none; /* Firefox */
   -ms-overflow-style: none;  /* Internet Explorer 10+ */
   z-index: 9999; /* Ensure it's above #list */
   /*padding-left: 100px;*/
   margin-top: 50px;

}

  1. show-event {
   background-color: #FAFAFA;
   border: 3px solid;
   padding: 0px 10px 0 10px;
   position: relative;
   top: 40px;
   /*margin-left: 36px;*/
   margin-left: 4.6%;

} .event-entry-number { 

   border-bottom: 1px solid black;
   font-size: 19px;
   line-height: 23px;
   letter-spacing: 0px;
   padding-bottom: 5px;
   padding-top: 7px;

} .event-people { 

   font-size: 25px;
   line-height: 30px;
   letter-spacing: 1.4px;
   text-decoration: underline;
   text-align: center;
   padding-top: 25px;
   margin-bottom: 5px !important;

} .event-people a { 

   color: black;
   text-decoration: underline;

} .event-title-link { 

   border-bottom: 1px solid black;
   padding-bottom: 10px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;

} .event-title { 

   font-size: 25px;
   line-height: 30px;
   letter-spacing: 1.4px;
   text-align: center;
   margin-bottom: 0 !important;
   margin-top: 0 !important;
   max-width: 70%;

} .event-link { 

   display: flex;
   margin-top: 5px;
   align-items: center;

}

/* -----END<------ EVENT HOMEPAGE */

/* ----->START------ FOOTER and SEARCH */

  1. view-more-footer {
   display: none;

} .footer { 

 position: fixed;
 left: 0;
 bottom: 0;
 width: 100%;
 box-sizing: border-box;
 z-index: 11;
 background: transparent linear-gradient(180deg, #FFF0 0%, rgba(250, 250, 250, 0.97) 80%) 0% 0% no-repeat padding-box;
 padding-bottom: 1%;
 padding-top: 100px;
 padding-left: 1.3%;
 padding-right: 1.3%;
 
 display: flex;
 justify-content: flex-start; /* Aligns the buttons to the right */
 align-items: center; /* Vertically center the items */

}

.submit-container { 

   position: relative; /* Positioning context for absolute children */
   display: inline-block; /* Constrain hover area to the container */
   width: calc(20% - 0px);

}

  1. submit {
   font-size: 17px;
   line-height: 22px;
   letter-spacing: 0.37px;
   cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="4.5" fill="white" stroke="black" stroke-width="1" /></svg>') 14 14, auto;
   color: black !important;

}

  1. submit:hover {
   color: black;
   text-decoration: underline;

} .submit-hide { 

   opacity: 0; /* Make it invisible initially */
   visibility: hidden; /* Ensure it's not interactable */
   display: none;
   background: black;
   width: 20%;
   position: absolute; /* Position relative to the parent */
   bottom: 100%; /* Position above the parent */
   left: 0; /* Align left with the parent */
   z-index: 1; /* Ensure it's above other content */
   transform: translateY(-10px); /* Slightly offset to prevent overlap */

} .submit-hide p { 

   color: white!important;
   font-size: 17px;
   line-height: 22px;
   letter-spacing: 0.37px;
   padding: 10px;

} .submit-hide p .italics { 

   color: white;
   font-style: italic;

} .submit-hide p .underline { 

   text-decoration: underline;

} .submit-container:hover .submit-hide { 

   display: block;
   opacity: 1;
   visibility: visible;
   width: auto;

}


.suggestions { 

   display: none!important;

}

.simpleSearch { 

 position: relative;
 display: inline-block;
 width: calc(20% - 0px);

}

  1. simpleSearch, #simpleSearchSpecial {
   text-align: left; 
   letter-spacing: normal;
   font-family: 'HALColant-TextRegular';
   cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><circle cx="14" cy="14" r="4.5" fill="white" stroke="black" stroke-width="1" /></svg>') 14 14, auto;
   text-transform: uppercase;
   background: none;
   border: none;
   font-size: 17px;
   line-height: 20px;

}

/* Style footer background and gradient */

  1. simpleSearch:before, #simpleSearchSpecial:before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   z-index: -1;

}

  1. searchInput,

.closing-bracket { 

   display: none;
   border: none;

} .searchresult { 

   display: none;

}

  1. simpleSearch:hover #searchInput {
 display: inline-block;
 border-bottom: 1px solid black;
 margin-left: -9.5px;
 background: #FAFAFA;
 width: calc(75% - 20px); /* Default width */

}

/* Small screens */ @media (max-width: 600px) { 

 #simpleSearch:hover #searchInput {
   width: calc(50% - 20px);
 }

}

/* Medium screens */ @media (min-width: 601px) and (max-width: 760px) { 

 #simpleSearch:hover #searchInput {
   width: calc(50% - 20px);
 }

}

/* Medium large screens */ @media (min-width: 761px) and (max-width: 900px) { 

 #simpleSearch:hover #searchInput {
   width: calc(50% - 20px);
 }

}

/* Large screens */ @media (min-width: 901px) and (max-width: 1000px) { 

 #simpleSearch:hover #searchInput {
   width: calc(60% - 20px);
 }

}

/* Large screens */ @media (min-width: 1001px) and (max-width: 1100px) { 

 #simpleSearch:hover #searchInput {
   width: calc(65% - 20px);
 }

}

/* Large screens */ @media (min-width: 1101px) and (max-width: 1200px) { 

 #simpleSearch:hover #searchInput {
   width: calc(65% - 20px);
 }

}

/* Large screens */ @media (min-width: 1201px) and (max-width: 1300px) { 

 #simpleSearch:hover #searchInput {
   width: calc(70% - 20px);
 }

}

/* Large screens */ @media (min-width: 1301px) and (max-width: 1400px) { 

 #simpleSearch:hover #searchInput {
   width: calc(70% - 20px);
 }

}


/* Large screens */ @media (min-width: 1401px) and (max-width: 1750px) { 

 #simpleSearch:hover #searchInput {
   width: calc(75% - 20px);
 }

}

/* Large screens */ @media (min-width: 1751px) { 

 #simpleSearch:hover #searchInput {
   width: calc(80% - 20px);
 }

}



  1. simpleSearchSpecial:hover #searchInput {
   display: inline-block;
   border-bottom: 1px solid black;
   margin-left: -5px;
   background: #FAFAFA;

}

  1. simpleSearch:hover .closing-bracket, #simpleSearchSpecial:hover .closing-bracket {
   display: inline-block;

}


/* ----->END------ FOOTER and SEARCH */

/* ----->START------ AUTHORS CREATORS */ /* Styling for Authors/Creators */ .smw-columnlist-container { 

 top: 420px;
 position: relative;
 margin: 0;
 width: 100%;

}

.smw-column { 

   width: 20%!important;

} .smw-column ul li { 

   list-style: none;

} .smw-column-header { 

   font-weight:normal;
   border-bottom: 1px solid black;
   margin-right: 10px;

} .smw-column ul { 

   font-size: 16pt;
   line-height: 27px;
   letter-spacing: 0.4px;
   text-align: center;
   text-decoration: underline;

} .smw-column a { 

   color: black;

} /* ----->END------ AUTHORS CREATORS */

/* ----->START------ COMMUNITY PAGE */ /* Styling for Community */ .community-col { 

   width: calc(100% - 0px);
   box-sizing: border-box;
   height: fit-content;
   padding: 0 0 0 0;

} .community-main-text { 

   margin-top: 0 !important;
   position: relative;
   top: 400px;
   font-size: 22px;
   line-height: 25px;
   letter-spacing: 0px;

}

  1. community-list {
   -moz-column-count: 5;
   -webkit-column-count: 5;
   -ms-column-count: 5;
   column-count: 5;
   -moz-column-gap: 10px;
   -ms-column-gap: 10px;
   -webkit-column-gap: 10px;
   column-gap: 10px;
   position: relative;
   margin: 0;
   width: 100%;
   top: 430px;

}

.community-card { 

   font-size: 12px;
   line-height: 25px;
   letter-spacing: 0.4px;
   display: inline-block;
   width: 100%;
   box-sizing: border-box;
   padding: 0 0 20px 0;
   margin-bottom: -1px; /* Negative margin, same as border thickness */
   border-top: 1px solid black;
   border-bottom: 1px solid black;
   break-inside: avoid-column;
   z-index: 1; /* Ensures the card is above the bottom border of the card above */
   background: #FAFAFA; /* Assuming cards have a white background */

} /* Add margin-top to individual community pages */ .community-page { 

   position: relative;
   top: 300px;

} /* Removes top border from the first card in each column */

  1. community-list .community-card:first-of-type {
   border-top: none;

}

/* Adds top border to the very first card in the grid */

  1. community-list .community-card:first-child {
   border-top: 1px solid black;

} .community-name { 

   font-size: 25px;
   line-height: 34px;
   letter-spacing: 1.4px;
   text-align: center;
   text-decoration: underline;
   padding-top: 45px;
   padding-bottom: 45px;
   border-bottom: 1px solid black;

} .community-name a { 

 color: black !important;

} .community-name a:hover { 

 font-style: italic;

} .community-external-reference { 

   text-align: center;
   font-size: 25px;
   line-height: 34px;
   letter-spacing: 1.4px;
   border-bottom: 1px solid black;

} .community-external-reference a { 

   color: white!important;

} .community-external-reference a:hover { 

   text-decoration: none;
   font-style: italic;

}

  1. community-list div.community-external-reference a {
 color: black !important;
 text-decoration:none;

} .community-setting { 

   font-size: 15px;
   line-height: 30px;
   letter-spacing: 0.48px;
   text-transform: uppercase;
   border-bottom: 1px solid black;

} .community-location { 

   font-size: 15px;
   line-height: 30px;
   letter-spacing: 0.48px;
   text-transform: uppercase;
   border-bottom: 1px solid black;

} .community-type { 

   font-size: 15px;
   line-height: 30px;
   letter-spacing: 0.48px;
   text-transform: uppercase;
   border-bottom: 1px solid black;

} .community-domain { 

   font-size: 15px;
   line-height: 30px;
   letter-spacing: 0.48px;
   text-transform: uppercase;
   border-bottom: 1px solid black;

} .community-description p { 

   text-indent: 35px;
   font-size: 19px;
   line-height: 26px;
   letter-spacing: 0.95px;
   margin: 0 !important;

} .community-description-label { 

   text-transform: uppercase;
   text-indent: 35px;
   font-size: 15px;
   margin: 0 !important;
   line-height: 30px;

} /* ----->END------ COMMUNITY PAGE */

/* ----->START------ SEARCH PAGE */ .hidden { 

   display: none;

} .oo-ui-layout.oo-ui-fieldLayout.oo-ui-fieldLayout-align-top.oo-ui-actionFieldLayout { 

   margin-top: 420px;

} .mw-search-exists { 

   padding-bottom: 20px;
   font-size: 17px;

} .mw-search-createlink { 

   padding-bottom: 20px;
   font-size: 17px;

} .mw-search-nonefound { 

   padding-bottom: 20px;
   font-size: 17px!important;

}

  1. mw-content-text .searchresults {
   padding: 25px;

}

  1. mw-search-top-table div.oo-ui-actionFieldLayout {
 padding-left: 25px;
 padding-right: 25px;

} /* ----->END------ SEARCH PAGE */

/* ----->START------ TOOLTIP EVENT CARDS */ .tooltip-popup { 

 position: fixed;
 padding: 6px 12px;
 background-color: #f9f9f9; 
 color: #111; 
 font-size: 13px;
 font-family: Arial, sans-serif;
 border: 1px solid #ccc; 
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 
 pointer-events: none;
 opacity: 0;
 transition: opacity 0.15s ease;
 z-index: 9999;

} /* ----->END------ TOOLTIP EVENT CARDS */

/* ----->START------ PRINT STYLES */ .print-only { display:none; } /* ----->END------ PRINT STYLES */

Retrieved from "https://softwear.directory/index.php?title=MediaWiki:Common.css.bak&oldid=5266"