/* This site's additions to Liebling (Website/README.md). */

/* Posts tagged "Recommended Apps" (recommended-apps; an app icon) or #icon-image (a page's icon, from the dashboard's link post tool) show the
   feature image whole instead of cropping it to fill, on the post cards (any list) and in the post's header. */
.m-article-card.tag-recommended-apps .m-article-card__picture-background,
.m-article-card.tag-hash-icon-image .m-article-card__picture-background {
  object-fit: contain;
  padding: 16px;
  box-sizing: border-box;
  opacity: 1;
}

.post-template.tag-recommended-apps .m-hero__picture.in-post img,
.post-template.tag-hash-icon-image .m-hero__picture.in-post img {
  object-fit: contain;
  /* The fixed menu bar (about 67 px) covers the top of the header. */
  padding: 96px 32px 32px;
  box-sizing: border-box;
}

/* A tag page's post count (tag.hbs), centered under the page count. */
.personal-post-count {
  margin: -24px 0 48px;
  text-align: center;
  font-size: .875rem;
  opacity: .7;
}

/* The Recommended Sites and Recommended Apps tag pills, wherever they appear (post cards in any list, a post's Tags list): the
   footer's purple with white text, as the footer's (the code injection's colors, data/site.json). Matched
   by the tag's link; more specific than the injected pill rule. */
:is(.m-article-card__tag, .m-tags li a):is([href$="/tag/recommended-sites/"], [href$="/tag/recommended-apps/"]) {
  background: var(--footer-background-color);
  color: #fff !important;
}

/* Menu dropdowns (partials/header.hbs): "- Name" items under the item above them. Until the script moves them, they
   are hidden, so the dash never shows. */
.m-nav__left > ul > li.nav-child {
  display: none;
}

/* The chevron marks a menu, on phones as well. */
.personal-dropdown-chevron {
  display: inline-block;
  margin-left: 4px;
  font-size: .75rem;
  transition: transform .2s;
}

/* Phones (the full-screen menu): sub-items always shown, indented under their item. */
.m-nav__left li > ul.personal-dropdown {
  display: block;
  margin: 15px 0 0;
  padding: 0 0 0 20px;
  list-style: none;
}

@media only screen and (min-width: 48rem) {
  /* The bar (and its row, .m-nav) scrolls sideways when it is too long, which would also clip a dropdown: let it show. */
  .m-nav,
  .m-nav__left {
    overflow: visible;
  }

  .personal-has-dropdown > a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
  }

  .personal-dropdown-chevron {
    margin-left: 0;
  }

  .personal-has-dropdown:hover .personal-dropdown-chevron,
  .personal-has-dropdown > a[aria-expanded="true"] .personal-dropdown-chevron {
    transform: rotate(180deg);
  }

  /* Opened by hover, or by a click (aria-expanded); top: 100% leaves no gap for the pointer to fall through. */
  .m-nav__left li > ul.personal-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: -16px;
    z-index: 20;
    min-width: 12rem;
    margin: 0;
    padding: 8px 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--background-color);
    border: 1px solid var(--primary-border-color);
    border-radius: 12px;
    box-shadow: 0 10px 30px var(--submenu-shadow-color);
  }

  .personal-has-dropdown:hover > ul.personal-dropdown,
  .personal-has-dropdown > a[aria-expanded="true"] + ul.personal-dropdown {
    display: flex;
  }

  .m-nav__left .personal-dropdown li {
    margin: 0;
    font-size: 1rem;
  }

  .personal-dropdown a {
    display: block;
    padding: 8px 16px;
    white-space: nowrap;
  }

  .personal-dropdown a:hover,
  .personal-dropdown a:focus-visible {
    background: var(--primary-subtle-color);
  }
}

/* Post cards' excerpts (partials/post_card.hbs): half way between the title and the date in size (1.25rem and
   .875rem; 1.625rem titles on cards without a picture), in the room between them; partials/card_excerpts.hbs sets
   the number of whole lines that fit. */
.personal-card-text {
  flex: 1 1 0;
  min-height: 0;
  margin-bottom: 10px;
  overflow: hidden;
}

.personal-card-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 8px 0 0;
  color: var(--titles-color);
  opacity: .8;
  letter-spacing: 0.2px;
  line-height: 1.45;
  font-size: 1.0625rem;
}

.m-article-card.no-picture .personal-card-excerpt {
  font-size: 1.25rem;
}