@import "animations.css";
@import "colors.css";
@import "general_classes.css";

@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,200;0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined");


* { margin: 0; padding: 0; outline: none; }

:root.font-large  { --fontRootSize: calc( 1.20 * max(16px, 0.6vw + 13.75px) ); }
:root.font-medium { --fontRootSize: calc( 1.00 * max(16px, 0.6vw + 13.75px) ); }
:root.font-small  { --fontRootSize: calc( 0.83 * max(16px, 0.6vw + 13.75px) ); }

html {  font-size: var(--fontRootSize); }

body {
  font-family:      "Lato", sans-serif;
  background-color: var(--baseBG);
  color:            var(--basePrimary);
}

header {

  border-style: solid;
  border-width: 0 0 0.125rem 0;

  display:      grid;
  align-items:  center;

  grid-template-columns: auto 1fr auto;
  grid-template-areas: "logo nav avatar";

  padding:  0.5rem 4vw 0.5rem 4vw;

  background-color: var(--baseBG);
  border-color:     var(--baseShadow);

  .link         { cursor: pointer; }
  .link:hover   { color: var(--baseSecondary); }

  a             { color: var(--basePrimary); text-decoration: none;}
  a:visited     { color: var(--basePrimary);  }
  a:hover       { color: var(--baseSecondary);  text-decoration: underline;}
  a:focus       { color: var(--baseSecondary); text-decoration: underline; }
  a:active      { color: var(--basePrimary);   }

  img.logo { grid-area: logo; height: 1.3rem; }

  nav {

    grid-area:    nav;
    justify-self: end;

    display:  flex;
      flex-direction:   row;
      flex-grow:        1;
      flex-wrap:        nowrap;
      justify-content:  end;

    ol {

      border-style:     solid;
      border-width:     0 0 0 3px;
      display:          none;
        flex-direction:   row;
        flex-wrap:        nowrap;
        justify-content:  end;
      padding:      0 0 0 0.45rem;

      border-color:     var(--baseSecondary);}

    li {

      margin:       0;
      padding:      0 0.45rem 0 0;
      line-height:  1;
      list-style:   none;

      font-size:    0.7rem;
      font-weight:  bold;

    }

  }

  #aAvatar {
    grid-area: avatar;
    justify-self: end;

    img:hover { box-shadow: 0 0 0 2px var(--baseSecondary); }
  }

}

main {

  min-height: 70vh;
  width:      100%;
  hyphens:    auto;

  .link         { color: var(--linkLink); cursor: pointer; }
  .link:hover   { color: var(--linkHover); }

  a             { color: var(--linkLink); text-decoration: none;}
  a:visited     { color: var(--linkVisited); }
  a:hover       { color: var(--linkHover); text-decoration: underline;}
  a:focus       { color: var(--linkFocus); text-decoration: underline; }
  a:active      { color: var(--linkActive); }

  /* img.banner { display: block; width: 100%; } */

  .member_avatar { margin: 0 auto; position: relative; width: 6rem;

    span.material-symbols-outlined, img.member-avatar {

      border-style:   solid;
      border-width:   0.05rem;
      border-radius:  50%;

      position: absolute;
      top:      -4.5rem;
      left: 0;
      height:         6rem;
      margin:0;
      width:          6rem;

      font-size:  6rem;

      color:      var(--baseSecondary);

      border-color:   var(--baseSecondary);
    }

  }

  & > figure {
    position: relative;
    display:  inline-block;
    width: 100%;

    img { display: block; width: 100%; }

    h1 {
      border-style: solid;
      border-width: 1px 0;
      line-height: 2.6;
      position:     absolute;
      margin:       1rem;
      min-width:    30vw;
      padding:      0 2rem;

      font-family:    'Lato', sans-serif;
      font-size:      max(0.8rem, 5vw - 0.8rem);
      letter-spacing: 0.35rem;
      text-align:     center;

      background-color: rgba(0, 0, 0, 0.75);
      border-color:     var(--baseSecondary);
      color:            var(--baseSecondary);
    }

  }

  & > article {

    box-sizing: border-box;
    padding:    1rem 2vw;
    width:      100%;

    h1  {
      margin:         1.5rem 0 2.0rem 0;
      padding:        0 0 0.25rem 0;

      font-size:      1.52rem;
      font-weight:    400;
      text-align:     center;

      &.title {
        border-style: solid;
        border-width: 0 0 0.1rem 0;
        margin      : 2rem 0 3rem 0;

        border-color: var(--baseSecondary);
      }

    }

    h2 {
      margin:       2.0rem 0 1.5rem 0;

      font-size:    1.3rem;
      font-weight:  400;
    }

    h3 {
      margin:       2.0rem 0 1.5rem 0;

      font-size:    1.15rem;
      font-weight:  400;
      text-align:   left;
    }

    h4 {
      margin:       1.5rem 0 1.0rem 0;

      font-size:    1rem;
      font-weight:  400;
      text-align:   left;
    }

    form {

      margin: 2rem auto;
      width: 60vw;

      div.item {

        display:          flex;
        flex-direction:   column;
        margin-bottom:    1.5rem;

        label { font-size: 0.9rem; font-weight: bold; }

        span.material-symbols-outlined { font-size: 1.1rem; }

        input {

          border-style:     solid;
          border-width:     0.05rem;
          border-radius:    0.25rem;
          box-sizing:       border-box;
          height:           1.6rem;
          margin:           0.4rem 0 0 0;
          padding:          0.3rem 0.5rem;
          width:            100%;

          font-size:        0.9rem;

          border-color:     var(--basePrimary);
          color:            var(--basePrimary);

          outline:          none;

          &:focus {
            box-shadow: 0 0 4px 1px var(--baseSecondary);
            border-color: var(--baseSecondary);
          }

          &:invalid { border-color: var(--signalDanger); }

          &[type="date"] { width: 50%; }

          &[type=file] { border: none; padding-left: 0;}

          &.not-unique { background-color: var(--signalDanger); }
          &.malformed  { border-color: var(--signalDanger); }

        }

        select {

          border-style:     solid;
          border-width:     0.05rem;
          border-radius:    0.25rem;
          height:           1.6rem;
          margin:           0.4rem 0 0 0;
          padding:          0.3rem 0.5rem;
          width:            50%;

          background-color: transparent;
          border-color:     var(--basePrimary);
          color:            var(--basePrimary);

          outline:          none;

        }

        p { margin: 0.25rem 0 0 0; font-size: 0.7rem;

          &.not-unique  { color: var(--signalDanger); font-weight: bold; }
          &.malformed   { color: var(--signalDanger); font-weight: bold; }

        }

        &.checkbox {

          display: flex;
          flex-direction: row;

          label {
            display:        inline;
            padding-left:   0.5rem;
            padding-top:    0.5rem;
            vertical-align: bottom;
          }

          input {
            display:        inline;
            height:         1.6rem;
            width:          2rem;
            vertical-align: bottom;
          }

        }

      }

    }

    ol, ul {

      margin:       1rem auto 1rem auto;
      line-height:  1.6;
      font-size:    1rem;
      word-wrap:    break-word;

      li {
      margin:       1rem auto 1rem 1.5rem;
      line-height:  1.6;
      font-size:    1rem;
      word-wrap:    break-word;
      }

    }

    p {
      margin:       1rem auto 1rem auto;
      line-height:  1.6;
      font-size:    1rem;
      word-wrap:    break-word;

      &.dropcap { position: relative; }

      &.dropcap::first-letter {
        float:			  left;
        font-size:	  3rem;
        font-weight:  300;
        line-height:  0.7;
        margin:       0;
        padding:     	0.4rem 0.3rem 0 0;

        color:        var(--basePrimary);
      }

    }

  }

}

footer {

  border-style:     solid;
  border-width:     0.125rem 0 0 0;
  box-sizing:       border-box;
  display:          grid;
    grid-template-columns:  1fr 1fr 1fr;
    grid-template-rows:     1fr auto;
    gap:                    1rem 1rem;
    grid-template-areas:    "privacy liability contact"
                            "copyright copyright copyright";
  padding:			    0 2vw 3rem 2vw;
  width:            100%;

  font-family:      "Lato", sans-serif;
  font-weight:      300;

  background-color: var(--footerBG);
  border-color:     var(--baseSecondary);

  color:            var(--footerText);

  .privacy      { grid-area: privacy;   }
  .liability    { grid-area: liability; }
  .contact      { grid-area: contact;   }
  .copyright    { grid-area: copyright; }

  a:link        { color: var(--footerLink); text-decoration: none; }
  a:visited     { color: var(--footerVisited); }
  a:hover       { color: var(--footerHover); }
  a:active      { color: var(--footerActive); }

  img.icon      { height: 1em; width: auto; }

  h1 {

    border-style:   solid;
    border-width:   0 0 0.05rem 0;
    margin:         2rem 0 1rem 0;
    padding:		    0;

    font-size:		  1rem;
    letter-spacing: 0.05rem;
    line-height:	  1.4;
    text-align:		  left;

    border-color:   var(--footerBorder);

  }

  p {

    font-size:      0.8rem;
    hyphens:		    auto;
    letter-spacing: 0.05rem;
    line-height:	  1.4;
    text-align:     left;
    word-wrap:	    break-word;

  }

}


@media only screen and (max-width: 767px) {

  main {
    article {
      form        { width: 76%; }
      table.plans { width: 90%; }
    }
  }

}

@media only screen and (max-width: 479px) {

  header {

    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo logo"
      "nav avatar";
    row-gap: 0.8rem;
    padding: 0.8rem 4vw;
    align-items: center;

    img.logo { height: 1.1rem; }

    nav {
      justify-self: end;
      ol > li { font-size: 0.75rem;}
    }

    #aAvatar { justify-self: end; }

  }


  footer {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "contact"
      "privacy"
      "liability"
      "copyright";
    padding: 0 4vw 3rem 4vw;
  }

}