/* main.css
 *
 * Styles for the Dad News Bears app.
 *
 * Provided without license.
 * Free to use if you find something here that's helpful.
 */

/* --[ FONTS ]--------------------------------------------------------------- */
@font-face {
  font-family: "Plein";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/static/fonts/Plein-Variable.woff2') format('woff2');
}

@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-display: swap;
  src: url('/static/fonts/Raleway-VF.woff2') format('woff2');
}

/* --[ VARIABLES ]----------------------------------------------------------- */
:root {
  --container-width: 62rem;
  --body-text: #333;
  --body-background: #fffffc;
  --tomato: #f95738;
  --yale-blue: #0d3b66;
  --celestial-blue: #449dd1;
  --naples-yellow: #f4d35e;
  --vanilla: #faeab3;
  --mint: #5dac82;
  --mint-cream: #e4f1ea;
  --light-grey: #666;
}


/* --[ STYLE RULES ]--------------------------------------------------------- */
html {
  background: var(--body-background);
  color: var(--body-text);
  font-size: 18px;
}

body {
  display: flex;
  flex-direction: column;
  font-family: "Raleway", "Helvetica Nueue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 1rem/1.5;
  margin: 0;
  min-height: 100vh;
  position: relative;
}

body > * {
  padding: 0 1.5rem;
}

a {
  color: var(--tomato);
  text-decoration: underline;
}
a:hover, a:focus { color: var(--yale-blue); }

h1, h2, h3, h4, h5, h6 {
  color: var(--yale-blue);
  font-family: "Plein", "Helvetica Nueue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  margin: 0 0 1.5rem;
}

h1 { font-size: 2rem; margin: 0; line-height: 1; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; margin-bottom: 0.86rem; }

button {
    border-radius: 0.75rem;
    cursor: pointer;
    font-size: 1.25rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.flash-messages {
    position: absolute;
    bottom: 6rem;
    right: 2rem;
}

.flash-messages li {
    border-radius: 1rem;
    padding: 0.75rem 1.5rem;
    display: none;
    opacity: 0;
    transition: opacity 1s linear, display 1s allow-discrete;
    transition-delay: 3s;
}

.flash-messages li.info {
    background: var(--mint-cream);
    border: 1px solid var(--mint);
}
.flash-messages li.error {
    background: hsl(from var(--tomato) h s calc(l + 33));
    border: 1px solid var(--tomato);
}


@starting-style {
    .flash-messages li {
        opacity: 1;
        display: inline-block;
    }
}

.header {
  background: linear-gradient(
    lch(from var(--yale-blue) calc(l + 33) c h), 15%, var(--yale-blue)
  );
  border-bottom: 2px solid var(--tomato);
  display: flex;
  align-items: center;
  margin-bottom: 3rem;
  padding: 0.665rem calc((100% - var(--container-width))/2);
}

.header a { text-decoration: none; color: var(--naples-yellow); }

.header .title-container {
  flex-grow: 2;
}

.header .user-actions {
  display: flex;
  margin: 0;
  padding: 0;
}

.header .user-actions li {
  margin-left: 1rem;
}


.footer {
  text-align: center;
  margin: 4.5rem auto 0;
  padding-bottom: 1.5rem;
}

.main {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  flex-grow: 1;
  justify-content: space-between;
  margin: 0 auto;
  width: var(--container-width);
}

.next-game {
  background: linear-gradient(lch(from var(--yale-blue) calc(l + 33) c h), 5%, var(--yale-blue));
  box-shadow: 0 3px 1rem 0 var(--light-grey);
  border-radius: 1.5rem;
  color: #eee;
  padding: 1rem 0;
  margin-bottom: 3rem;
  text-align: center;
}

.next-game .rsvp { font-size: 1.2rem; font-weight: bold; }

.next-game-actions {
    margin: 0;
}

.next-game-actions form {
    display: flex;
    flex-flow: row nowrap;
    align-items: baseline;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.next-game-actions li { margin-right: 1rem; }

.next-game h3 { color: var(--celestial-blue); }
.next-game h4 { font-size: 2rem; color: var(--naples-yellow); }

.game-lists {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

/* This flex-basis hack here is gross and probably brittle AF... */
.rsvpd-games { flex: 1 1 57%; }
.available-games { flex-grow: 1; }

.games-list {
    margin: 1.5rem 0 3rem;
}

.games-list .game-actions {
    margin-bottom: 0;
    margin-right: 0.5rem;
}

.game {
    display: flex;
    align-items: baseline;
    margin-bottom: 0.75rem;
}

.future-game .game-actions-form { display: flex; }

.game-action { margin-right: 0.5rem; }
.game-action:last-child { margin-right: 0; }

.rsvp-no {
    border: 1px solid lch(from var(--tomato) calc(l - 33) c h);
    background: linear-gradient(
        lch(from var(--tomato) calc(l + 33) c h), 5%, var(--tomato)
    );
    color: #fff;
}

.rsvp-no:hover {
    background: linear-gradient(
        var(--tomato), 95%, lch(from var(--tomato) calc(l + 33) c h)
    );
}

.rsvp-no:active { background: var(--tomato); }

.rsvp-yes {
    border: 1px solid lch(from var(--mint) calc(l - 33) c h);
    background: linear-gradient(
        lch(from var(--mint) calc(l + 33) c h), 5%, var(--mint)
    );
    color: #fff;
}

.rsvp-yes:hover {
    background: linear-gradient(
        var(--mint), 95%, lch(from var(--mint) calc(l + 33) c h)
    );
}

.rsvp-yes:active { background: var(--mint); }


.game-info {
  background: linear-gradient(lch(from var(--yale-blue) calc(l + 33) c h), 5%, var(--yale-blue));
  box-shadow: 0 3px 1rem 0 var(--light-grey);
  border-radius: 1.5rem;
  color: #eee;
  padding: 1rem 0 0.5rem;
  margin-bottom: 3rem;
  text-align: center;
}

.game-container { display: flex; }
.game-container > section { flex: 1 0 50%; }

.game-rsvp-yes { color: var(--mint); }
.game-rsvp-no { color: var(--tomato); }

.with-rsvp .rsvp { margin-left: 1rem; }

.without-rsvp {
    display: flex;
    margin: 0;
}
.without-rsvp .game-actions-form { display: flex; margin: 0; padding: 0; }
.without-rsvp .rsvp { margin-right: 0.5rem; }

.game-info h3 { color: var(--celestial-blue); }
.game-info h4 { font-size: 2rem; color: var(--naples-yellow); }
.game-info h4.game-location { color: var(--celestial-blue); font-size: 1.7rem; }


.user-page-container {
    display: flex;
    justify-content: space-between;
}

.user-profile-form { margin: 0; }

.user-page-container label { font-weight: 600; margin-right: 1rem; }

.user-page-container input,
.user-page-container select {
    border: 1px solid var(--light-grey);
    border-radius: 0.75rem;
    font-size: 1.1rem;
    padding: 0.25rem 0.75rem;
}

.user-page-container input[type=submit] {
    border: 1px solid lch(from var(--mint) calc(l - 33) c h);
    background: linear-gradient(
        lch(from var(--mint) calc(l + 33) c h), 5%, var(--mint)
    );
    color: #fff;
    border-radius: 1.5rem;
    margin-top: 0.75rem;
}

.user-page-container input[type=submit]:hover {
    background: linear-gradient(var(--mint), 85%, lch(from var(--mint) calc(l + 33) c h));
}

.user-page-container input[type=submit]:active { background: var(--mint); }

.user-profile-form li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.invitations {
    margin: 0 0 4.5rem;
}

.sent-invitation { margin-bottom: 0.75rem; }
.sent-invitation-status {
    border: 1px solid var(--body-text);
    border-radius: 1.5rem;
    display: inline-block;
    margin-right: 0.5rem;
    padding: 0.25rem 0.75rem;
}

.invitation-status-pending {
    border-color: hsl(from var(--naples-yellow) h s calc(l - 30));
    background: var(--naples-yellow);
}

.invitation-status-accepted {
    border-color: hsl(from var(--mint) h s calc(l - 20));
    background: var(--mint);
    color: #fff;
}

.sent-invitation-name { font-size: 1.1rem; font-weight: 600; }

.invitation-code {
    background: var(--mint-cream);
    border: 1px solid var(--mint);
    border-radius: 1rem;
    margin: 1.5rem 0;
    padding: 1rem;
}

.invitation-code h4 { font-size: 1.2rem; }


/* --[ LOGIN, INVITATION, & REGISTRATION PAGES ]-----------------------------*/
.error404, .login, .invitation, .register-user {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    background: var(--vanilla);
}

.error404 .main,
.login .main,
.invitation .main,
.register-user .main {
    display: block;
    flex-grow: 0;
    min-height: 0;
}
.error404 .main { max-width: calc(var(--container-width) / 2); margin:  0 auto; }

.login a:hover { color: var(--tomato); text-decoration: none; }

.login h1,
.invitation h1 { color: var(--naples-yellow); font-size: 2.5rem; margin-bottom: 1rem; }
.register-user h1 { color: var(--naples-yellow); font-size: 2.5rem; margin-bottom: 2rem; }

.error404 h2,
.login h2,
.invitation h2,
.register-user h2 { color: var(--celestial-blue); font-size: 1.2rem; font-weight: 400; margin-bottom: 3rem; }

.login-form,
.invitation-form,
.user-create-form {
  background: linear-gradient(lch(from var(--yale-blue) calc(l + 33) c h), 5%, var(--yale-blue));
  box-shadow: 0 3px 1rem 0 var(--light-grey);
  border-radius: 1.5rem;
  color: #eee;
  padding: 3rem 0 3rem;
  text-align: center;
}
.user-create-form { max-width: calc(var(--container-width) / 2); margin:  0 auto; }

.login-form input,
.invitation-form input,
.user-create-form input,
.user-create-form select {
    border: 0;
    border-radius: 1rem;
    font-size: 1.25rem;
    margin-right: 0.5rem;
    padding: 0.75rem 1rem;
}

.login-form input[type=submit],
.invitation-form input[type=submit],
.user-create-form input[type=submit] {
    border: 1px solid lch(from var(--mint) calc(l - 33) c h);
    background: linear-gradient(
        lch(from var(--mint) calc(l + 33) c h), 5%, var(--mint)
    );
    color: #fff;
    border-radius: 1.5rem;
}
.user-create-form input[type=submit] { margin-top: 1.5rem; }

.login input[type=submit]:hover,
.invitation-form input[type=submit]:hover,
.user-create-form input[type=submit]:hover {
    background: linear-gradient(var(--mint), 85%, lch(from var(--mint) calc(l + 33) c h)
    );
}

.login-form input[type=submit]:active,
.invitation-form input[type=submit]:active,
.user-create-form input[type=submit]:active { background: var(--mint); }

/* A few overrides for the User Creation form so it doesn't look like ass */
.user-create-form {
    padding: 3rem 6rem;
    text-align: left;
}

.user-create { margin-bottom: 1.5rem; }

.user-create li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.user-create li label { margin-right: 1rem; }

/* --[ MISC CLASSES ]--------------------------------------------------------*/
.heart { color: var(--tomato); }
.link-back { margin: 1.5rem 0; }