@use './components/config';
@use './components/reset';
@use './components/utilities';
@use './components/superminimal';
@use './components/top-button';
@use './components/skip-link';
@use './components/post';
@use './components/hero';

:root {
  @media screen and (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }
}

body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;

  > header {
    display: flex;
    justify-content: space-between;
    padding: .2rem 1rem;
    flex-direction: column;
    
    @media screen and (min-width: 768px) {
      align-items: center;
      flex-direction: row;
    }
  
    nav {
      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }
      li {
        padding: 6px 20px;
        display: inline-block;
      }

      a[aria-current="page"] {
        color: var(--brand-variant);
      }
    }
  }

  > footer {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    flex-direction: column;
    align-items: center;

    .list-inline {
      --item-separator: "";
      --item-gap: .25ch;

      a:hover {
        --item-color: var(--text1)
      }
    }
  
    @media (min-width: 768px) {
      flex-direction: row;
    }
    
    &:has(.site-footer__part:only-child) {
      flex-direction: column;
      align-items: center;
    }
  }

}

main {
  position: relative;
}

img {
  vertical-align: middle;
  opacity: var(--img-opacity);

  &:hover {
    opacity: 1;
  }
}

/** 
 * Header anchor
 */
.header-anchor {
  opacity: 0;
  text-decoration: none;
  color: var(--text2);
  font-size: .85em;
  float: left;
  margin-left: -0.87em;
  padding-right: 0.23em;
  margin-top: 0.125em;

  &:hover {
    text-decoration: underline;
  }

  :where(h2, h3, h4):hover & {
    opacity: 1;
  }
}

.theme-toggle {
  color: var(--text1);
}

.home {
  h2 {
    font-size: calc(1.5 * var(--font-size));
  }
}