/*
  Copyright (c) 2026 Rich Pin Software. All rights reserved.

  Content: Layout Styles
*/

body {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
}

header, footer, main {
  display: grid;
}

.wrapper { /* wrapper for content within main */
  margin-inline: auto;
  padding: 0 var(--space-s);
  max-width: var(--max-width-wrapper);
  width: 100%;
}

.card {
  display: grid;
  gap: var(--space-m);
  padding: var(--space-m);
}

header {
  height: var(--header-height);

  & .wrapper { /* header wrapper */
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  & h1 { /* allows nested link to fill heading */
    display: flex;
  }

  & svg { /* nav-closed menu icon */
    height: calc(var(--header-height) / 2);
  }

  & svg:last-child { /* nav-open menu icon */
    display: none;
  }
}

footer {
  position: relative;
  z-index: 1000;
  height: var(--footer-height);
  
  & .wrapper { /* footer wrapper */
    display: flex;
    align-items: center;

    & p { /* copyright wrapper */
      display: grid;
      grid-template-columns: auto 1fr;
      grid-template-rows: 1fr;
      grid-template-areas: 
      'copyright-icon content-start content-end';
      align-items: center;
      gap: var(--space-xs);

      & svg { /* copyright icon */
        grid-area: copyright-icon;
        width: var(--font-size-xs);
      }

      & small:first-child { /* first half of copyright */
        grid-area: content-start;
      }

      & small:last-child { /* second half of copyright */
        grid-area: content-end;
      }

      @media (max-width: 500px) { /* stack first and second half copyright on mobile */
        grid-template-rows: 1fr 1fr;
        grid-template-areas: 
        'copyright-icon content-start'
        'content-end content-end';
      }
    }
  }
}

main {
  grid-template-columns: 1fr;

  & nav { /* navigation sidebar opens over page content */
    position: fixed;
    top: var(--header-height);
    right: 0;
    height: 100%;
    z-index: 1000;
  }

  & .nav-links {
    display: flex;
    flex-direction: column;
    width: 0;
    height: 100%;

    & li {
      display: flex;
    }

    & a {
      flex: 1; /* fill list-item */
      padding: var(--space-m);
    }
  }

  & .wrapper { /* page-content wrapper */
    display: grid;
    gap: var(--space-l);
  }

  & .card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(auto-fit, auto);
    gap: var(--space-m);
    margin: var(--space-l) 0;
    height: fit-content;

    @media (max-width: 768px) {
      grid-template-columns: 1fr;
    }
  }

  & .card {
    & svg {
      display: inline;
      grid-area: icon;
      align-self: center;
      width: var(--font-size-l);
    }

    & h3 {
      grid-area: heading;
      align-self: center;
    }

    & p {
      grid-area: content;
      padding: var(--space-s);
    }

    @media (max-width: 500px) {
      padding: var(--space-s);
      gap: var(--space-s);
    }
  }
}

#home { /* Home page */
  & .card {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
    'icon heading'
    'content content';
  }
}

#about-me { /* About Me page */
  & .card:first-child { /* profile img and headings */
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto auto;
    grid-template-areas: 
    'profile-img'
    'heading'
    'subheading';

    & .profile-img-wrapper {
      grid-area: profile-img;

      & img {
        place-self: center;
        width: min(150px, max(100px, 5.75vw));
      }
    }

    & h3 {
      grid-area: heading;
    }

    & h6 {
      grid-area: subheading;
    }
  }

  & .card:last-child { /* about content */
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
    'icon heading'
    'content content';
  }
}