/* This site's styles beyond the theme's personal.css (Website/theme/assets/css/personal.css). */

/* The recommended tags' pills link to their collections here (/recommended/sites/, /recommended/apps/), not to
   /tag/...: the same footer purple with white text as personal.css gives them. */
:is(.m-article-card__tag, .m-tags li a):is([href="/recommended/sites/"], [href="/recommended/apps/"]) {
  background: var(--footer-background-color);
  color: #fff !important;
}

/* The 404 page (src/pages/404.astro): a shrug as its picture, in the dashboard's orange in dark mode and the
   accent purple in light mode (the image is a mask, so one file serves both), then three recommendations. */
.personal-404-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  /* The fixed menu bar (about 67 px) covers the top. */
  padding: 120px 24px 48px;
}

.personal-404-shrug {
  width: min(720px, 90%);
  aspect-ratio: 2042 / 390;
  background-color: var(--footer-background-color, #4e2a84);
  -webkit-mask: url("/site/404_shrug.webp") center / contain no-repeat;
  mask: url("/site/404_shrug.webp") center / contain no-repeat;
}

html[data-theme="dark"] .personal-404-shrug {
  background-color: var(--dashboard-orange, #f5a25d);
}

.personal-404 {
  padding: 0 20px 64px;
  text-align: center;
}

.personal-404-more {
  padding-bottom: 64px;
}

.personal-404-more__title {
  text-align: center;
}

/* The 404 page's "404" in light mode: the dark mode's page background (the palette's darkest purple, set by
   the palette in data/site.json's code injection; not a variable in light mode). Dark mode keeps the theme's color. */
html[data-theme="light"] .m-404-title {
  color: #17121f;
}

/* The footer's feed menu (Footer.astro): the RSS icon opens a popover listing the site's feeds. */
.personal-feeds-button {
  display: inline-block;
  margin: 0 15px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--dashboard-orange, #f5a25d);
  font-size: 1rem;
  line-height: inherit;
  cursor: pointer;
}

.personal-feeds {
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  margin: auto;
  padding: 20px 20px 24px;
  border: 1px solid var(--primary-border-color);
  border-radius: 16px;
  background: var(--background-color);
  color: var(--primary-foreground-color);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  text-align: left;
}

.personal-feeds::backdrop {
  background: rgba(23, 18, 31, 0.5);
}

.personal-feeds__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.personal-feeds__title {
  margin: 0;
  color: var(--titles-color);
  font-size: 1.25rem;
}

.personal-feeds__close {
  padding: 6px;
  border: 0;
  background: none;
  color: var(--titles-color);
  font-size: 1rem;
  cursor: pointer;
}

.personal-feeds__hint {
  margin: 4px 0 12px;
  font-size: .875rem;
  opacity: .75;
}

.personal-feeds__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.personal-feeds__list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--titles-color);
  text-decoration: none;
}

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

.personal-feeds__list .icon-rss {
  color: var(--dashboard-orange-line, #c75a00);
}

.personal-feeds__list strong,
.personal-feeds__list small {
  display: block;
}

.personal-feeds__list small {
  opacity: .75;
}

/* The tailnet preview's drafts and scheduled posts (src/lib/site.js previewState): a label before the title. */
.personal-preview-label {
  display: inline-block;
  margin-right: .5em;
  padding: .1em .55em;
  border-radius: 999px;
  background: var(--dashboard-orange, #f5a25d);
  color: #17121f;
  font-size: .6em;
  font-weight: 700;
  letter-spacing: .04em;
  vertical-align: middle;
}

/* The aperture's extras (src/lib/site.js APERTURE_EXTRAS), each still when motion is reduced. */
.personal-aperture-sprite {
  position: absolute;
  overflow: hidden;
}

/* The straight-blade iris drawn to move (Iris.astro; lib/aperture.js IRIS): --iris-d is the six chords' distance from
   the centre, 3 closed (a small hexagon still open in the middle) to 32.17 fully open. Each blade's half-plane slides out along its own direction by --iris-d,
   the next blade's gap by --iris-d less the gap (2.4); BH shows through the hexagonal hole (apothem --iris-d).
   Registered, so the header logo's click can animate it. */
@property --iris-d {
  syntax: "<number>";
  inherits: true;
  initial-value: 12.8;
}
.personal-iris-blade {
  transform: translateX(calc(var(--iris-d) * 1px));
}
.personal-iris-gap {
  transform: translateX(calc((var(--iris-d) - 2.4) * 1px));
}
.personal-iris-hole {
  transform-box: view-box;
  transform-origin: 0 0;
  transform: scale(var(--iris-d));
}

/* The header logo (HeaderLogo.astro: the iris with BH, drawn inline; a link to the home page), large enough for its
   letters to read; at rest its chords stand at 18.5 (IRIS.logo), open enough to leave space round BH. */
.m-logo {
  height: 44px;
}
.m-logo svg.personal-iris {
  --iris-d: 18.5;
  display: block;
  height: 100%;
  width: auto;
  aspect-ratio: 1;
  fill: #4f2a84;
}
html[data-theme="dark"] .m-logo svg.personal-iris {
  fill: #ece6f5;
}

/* The header logo's shutter click, on hover or keyboard focus: the six blades slide in together over BH until only a
   small hexagon is left open in the middle (closed, IRIS.closed), then back out. */
@keyframes personal-iris-close {
  0%, 100% { --iris-d: 18.5; }
  40%, 60% { --iris-d: 3; }
}
.personal-aperture-extras .m-logo:is(:hover, :focus-visible) svg.personal-iris {
  animation: personal-iris-close .9s cubic-bezier(.45, 0, .25, 1);
}

/* The reading-progress shutter (ApertureShutter.astro: the iris without BH) is the progress, in place of the theme's
   ring. As the page scrolls to the post's end (--open, 0 to 1) the blades slide out from closed (a small hexagon left
   open, IRIS.closed) to fully open (a perfect hexagon), and the iris turns a quarter turn. It follows the scroll directly (no transition). */
.m-icon-button.personal-shutter-button svg:not(.personal-shutter) {
  display: none;
}
.m-icon-button.personal-shutter-button svg.personal-shutter {
  --iris-d: calc(3 + var(--open, 0) * 29.17);
  position: absolute;
  inset: 15%;
  width: 70%;
  height: 70%;
  fill: currentColor;
  opacity: 1;
  overflow: visible;
  transform: rotate(calc(var(--open, 0) * 90deg));
}
/* The theme strokes and turns every circle in this button (its progress ring); not the shutter's. */
.m-icon-button.personal-shutter-button svg.personal-shutter circle {
  stroke: none;
  transform: none;
  transition: none;
}

/* The end-of-post mark: a small aperture after the post's last paragraph, in the accent color. */
.personal-aperture-extras .js-post-content > p:last-of-type::after {
  content: "";
  display: inline-block;
  width: .85em;
  height: .85em;
  margin-left: .45em;
  vertical-align: -.08em;
  background: var(--footer-background-color, #4e2a84);
  -webkit-mask: url(/content/images/branding/aperture_dark.svg) center / contain no-repeat;
  mask: url(/content/images/branding/aperture_dark.svg) center / contain no-repeat;
}
html[data-theme="dark"].personal-aperture-extras .js-post-content > p:last-of-type::after {
  background: var(--dashboard-orange, #f5a25d);
}

/* The footer mark, before the copyright line. */
.personal-footer-aperture {
  width: 1.1em;
  height: 1.1em;
  margin-right: .45em;
  vertical-align: -.2em;
  fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .personal-aperture-extras .m-logo svg.personal-iris { animation: none !important; }
}

/* Sliders (public/site/site.js): a row that scrolls sideways, a card at a time, in place of the theme's Swiper. */
.swiper {
  position: relative;
}
.swiper-wrapper {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.swiper-wrapper::-webkit-scrollbar {
  display: none;
}
.swiper-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}
.m-recent-articles .swiper-slide {
  flex-basis: auto;
}
@media only screen and (min-width: 45rem) {
  .m-recommended-slider .swiper-slide { flex-basis: 50%; }
}
@media only screen and (min-width: 64rem) {
  .m-recommended-slider .swiper-slide { flex-basis: 33.3333%; }
  .m-recommended-slider .swiper-wrapper { justify-content: flex-start; }
}
.swiper-button-prev:disabled,
.swiper-button-next:disabled {
  opacity: .35;
  cursor: default;
}

/* Card titles shortened by line count (the theme's Shave measured heights: 100, 250, 200, and 50 px). */
.js-article-card-title,
.js-article-card-title-no-image,
.js-featured-article-title,
.js-recent-article-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.js-article-card-title { -webkit-line-clamp: 3; }
.js-article-card-title-no-image { -webkit-line-clamp: 6; }
.js-featured-article-title { -webkit-line-clamp: 5; }
.js-recent-article-title { -webkit-line-clamp: 2; }
@media only screen and (min-width: 48rem) {
  .js-featured-article-title { -webkit-line-clamp: 4; }
}

/* Image zoom (public/site/site.js): a picture in a post opens full size. */
.personal-zoomable {
  cursor: zoom-in;
}
.personal-zoom {
  max-width: 100vw;
  max-height: 100vh;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-out;
}
.personal-zoom::backdrop {
  background: rgba(10, 8, 14, .88);
}
.personal-zoom img {
  display: block;
  max-width: 96vw;
  max-height: 94vh;
  object-fit: contain;
}

/* Embedded video keeps its shape at any width (the theme's fitvids). */
.js-post-content .kg-embed-card iframe,
.js-post-content > iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}