/**
 * Custom CSS
 *
 * This file is for your custom styles.
 * You can add any CSS rules here to customize the Ghost theme.
 *
 * Note: Changes made directly to this file may be overwritten during theme updates.
 * It's recommended to use the Code Injection feature in Ghost for persistent customizations.
 */

/* Your custom CSS goes below this line */
:root {
  --highlight-color: #FF3B3F;
}

/* ----------- */
/* Custom logo */
.logo {
  img { display: inline; }
  .logo__former {
    font-weight: var(--font-weight-normal);
    text-transform: uppercase;
    padding-right: var(--spacing-3);
    border-right: 2px solid var(--highlight-color);
  }
  &:hover img { transform: scale(1.1); }
}

/* ------------ */
/* Footer badge */
.footer {
  --badge--height: 30px;

  > .footer__human-badge {
    background: url("/assets/images/human-badge-default.svg") no-repeat;
    background-size: 90px auto;
    position: absolute;
    left: 0;
    top: calc(var(--badge--height) * -0.5);
    margin-left: var(--spacing-9);
    width: 90px;
    height: var(--badge--height);
  }
}

[data-color-scheme='dark'] .footer {
  > .footer__human-badge {
    background-image: url("/assets/images/human-badge-dark.svg");
  }
}

/* ------------ */
/* Social Links */
.sidebar-footer {
  padding-bottom: calc(var(--spacing-8) + 0.2rem);
}

.social-links {
  .social-link {
    svg {
      width: 1em;
      height: 1em;
    }

    > span {
      display: block;
      line-height: 1;
      max-width: 0;
      overflow: hidden;
      white-space: nowrap;
      padding-left: 0;
      transition:
        max-width .2s ease,
        padding-left .2s ease;
    }
  }

  .social-link:hover,
  .social-link:focus-visible {
    > span {
      max-width: 200px;
      padding-left: var(--spacing-2);
    }
  }
}

.social-links, .dropdown-share {
  li > .social-linkedin:hover > svg { color: #0077B5; }
  li > .social-twitter:hover > svg { color: #1DA1F2; }
  li > .social-mastodon:hover > svg { color: #6364ff; }
  li > .social-github:hover > svg { color: #bd2c00; }
  li > .social-rss:hover > svg { color: #f26522; }
  li > .social-facebook:hover > svg { color: #1877f2; }
  li > .social-reddit:hover > svg { color: #FF5700; }
  li > .social-email:hover > svg { color: #ffce00; }
  li > .social-clipboard:hover > svg { color: #00ab6c; }
}

/* ------- */
/* Sidebar */
.sidebar {
  h1.title {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-bold);
    font-size: calc(var(--font-h1) * 0.9);
    text-transform: uppercase;
    letter-spacing: var(--spacing-4);

    .logo__former {
      margin-right: var(--spacing-4);
      border-right: 2px solid var(--highlight-color);
    }

    .logo__separator {
      color: var(--highlight-color);
    }

    .logo__handle {
      position: relative;
      overflow-y: visible;
    }

    .logo__handle::after {
      content: '';
      display: block;
      background-color: var(--highlight-color);
      width: 6px;
      height: 9px;
      border-radius: 2px;
      position: absolute;
      bottom: -1px;
      left: 0px;
      transform: rotate(30deg);
    }
  }

  h1.title + p {
    margin-top: var(--spacing-2);
  }

  .tag-card-head > h1 {
    text-transform: uppercase;
    letter-spacing: var(--spacing-1);
    &::before {
      margin-right: var(--spacing-4);
      border-right: 2px solid var(--highlight-color);
      padding-right: var(--spacing-4);
      content: "IN";
    }
  }

  .post-media {
    margin-top: var(--spacing-4);
    margin-bottom: var(--spacing-4);
  }

  .sidebar-content {
    max-width: none;
  }
}

/* ----- */
/* Posts */
.post-featured-image {
  figcaption { display: none; }

  picture { overflow: hidden; }
}

.post-card {
  a.post-card-media { display: block; }

  .post-card-media img {
    transition: transform 0.3s ease;
  }

  &:hover {
    .post-card-head > h2 > a {
      text-decoration: none;
      color: color-mix(in srgb, var(--tag--color, var(--ghost-accent-color)), var(--color-contrast) 20%);
      transition: color .3s ease;

      &:hover {
        background: none;
      }
    }

    .post-card-media img {
      transform: scale(1.02);
    }
  }
}

/* --------- */
/* Sidenotes */

.post-content {
  --sidenote--width: 40%;

  .sidenote, .sidenoteGroup {
    float: right;
    clear: right;
    width: var(--sidenote--width);
    max-width: 250px;
    margin: 0 0 0.5rem 0.5rem;
    font-size: 80%;
    background-color: var(--color-dots);
    font-size: var(--font-small);
    font-weight: var(--font-weight-medium);
    line-height: 1.3;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    padding: var(--spacing-3) var(--spacing-5);
  }

   & > .sidenote:first-child, & > .sidenoteGroup:first-child {
    margin-top: var(--vertical-rhythm);
  }

  /* Members inside a group stack vertically and share the group's border */
  .sidenoteGroup > .sidenote {
    float: none;
    clear: none;
    width: 100%;
    margin: 0;
    border: none;
    padding: 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .sidenoteGroup .sidenote:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
  }

  /* --- Footnotes (shown when sidenotes are hidden) --- */
  .footnotes {
    clear: both;
    font-size: 80%;

    ol {
      padding-left: var(--spacing-7);
    }
  }

  /* Footnote markers */
  .footnote-ref > a {
    text-decoration: none;
    font-size: 80%;
  }
  a.footnote-backref {
    text-decoration: none;
  }
}

/* ----- */
/* About */

/* Min-width here = --breakpoint-md; can't figure out how to reference that custom-media variable */
@media (min-width: 840px) {
  .sidebar-container .page-about-background {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-image: url("/assets/images/san-francisco-background.jpeg");
    background-size: cover;
    background-position: center;
    mask-image:
      linear-gradient(to bottom, transparent, #000 50%, transparent 100%),
      linear-gradient(to right, transparent, #000 50%, transparent 100%);
    mask-composite: intersect;
    opacity: 0.5;
    top: 0;
    left: 0;

    /* Make sure that the title stays on top of the faded background image */
    & ~ h1 {
      position: relative;
      z-index: 100;
    }
  }
}